Vue3如何引⼊静态资源——打包代码和源代码运⾏区分（六）⽂章⽬录
参考
1.
静态资源分两种情况：
1. 第三⽅资源，需要从node_module中引⽤，这个vite脚⼿架会帮我们移动到⼯程⽬录\node_modules\.vite_opt_cache⽬录中
2. 当前⼯程的静态资源⽂件，例如：图⽚
解决办法
1. 配置⽬录别名，⽅便引⽤（本地⼯程静态资源的引⽤）
alias:{
// 键必须以斜线开始和结束
'/@/': solve(__dirname,'./src')
// '/@components/': solve(__dirname, './src/components')
}
}
2. 如果是引⼊第三⽅⽂件，则需要引⼊第三⽅⽂件
// 引⼊第三⽅的配置
optimizeDeps:{
include:["moment","echarts","axios","mockjs"]
}
}
3. 总的配置
const path =require('path')
// fig.js # fig.ts
console.solve(__dirname,'./src'))
// 引⼊第三⽅的配置
optimizeDeps:{
include:["moment","echarts","axios","mockjs"]
},
alias:{
// 键必须以斜线开始和结束
'/@/': solve(__dirname,'./src')
// '/@components/': solve(__dirname, './src/components')
}
}
源代码（⾮打包代码）运⾏
1. Vue⽂件引⼊其他Vue⽂件作为组件
<template>
<div class="screen" v-if="isShowScreen">
<!--⼤屏头部-->
<ScreenHeader></ScreenHeader>
<div class="screen--main">
<!--⼤屏第⼀列-->
<div class="screen--main__item screen--main__column1">
<Column1First></Column1First>
<Column1Second></Column1Second>
</div>
<!--⼤屏第⼆列-->
<div class="screen--main__item screen--main__column2">
<CenterMap></CenterMap>
</div>
<!--⼤屏第三列-->
<div class="screen--main__item screen--main__column3">
<Column3First></Column3First>
<Column3Second></Column3Second>
</div>
<!--⼤屏第四列-->
<div class="screen--main__item screen--main__column4">
<Column4First></Column4First>
</div>
</div>
</div>
</template>
<script>
// ⼀定要以“/”开头
import Column1First from'/@/pages/screen/column1/Column1First.vue' import Column1Second from'/@/pages/screen/column1/Column1Second.vue' import CenterMap from'/@/pages/screen/column2/CenterMap.vue'
import Column3First from'/@/pages/screen/column3/Column3First.vue' import Column3Second from'/@/pages/screen/column3/Column3Second.vue' import Column4First from'/@/pages/screen/column4/Column4First.vue' import ScreenHeader from'./ScreenHeader.vue'
import*as API from'/@/api/apiConfig.js'
export default{
data(){
return{
isShowScreen:false,
changeTime:5*60*1000
// changeTime: 4 * 1000
}
},
provide:function(){
return{
screenContext:this
}
},
components:{
ScreenHeader,
Column4First,
Column3Second,
Column3First,
CenterMap,
Column1First,
Column1Second
},
async mounted(){
ChangeType()
},
methods:{
getChangeType(){
404页面网站源码ChangeTypeService().then(res =>{
// this.changeTime = res.data.changeTime * 60 * 1000
this.changeTime =5*60*1000
this.isShowScreen =true
})
}
}
}
</script>
2. 在Vue⽂件中引⽤第三⽅⽂件
// 获取粉丝数量
import Mock from'mockjs'
const ctx ='myproject'
// 获取销售占⽐，当⽉总销售
code:'0',
msg:'success',
data:{
handRate:'33',
onlineRate:'67.0',
totalTicket:794561670
}
})
3. 在html静态页⾯中使⽤（打包报错, npm run dev不报错）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--使⽤相对路径引⽤-->
<!--<script src="/src/assets/js/echarts.min.js"></script>
<script src="/src/assets/js/china.js"></script>-->
<!--使⽤vite 转换引⽤-->
<script src="/@/assets/js/echarts.min.js"></script>
<script src="/@/assets/js/china.js"></script>
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
4. 在css 样式 style中使⽤（打包报错, npm run dev不报错）
<style lang="scss">
.progress{
position: relative;
margin-top: 0.1rem;
&--all{
background-color: #fff;
width: 100%;
height: 0.12rem;
background-image:url('/@/assets/images/screen/IntervalLinebg.svg');
background-repeat: repeat;
}
}
</style>
5. 在html <template>中使⽤（打包不报错，npm run dev不报错，不推荐）
<template>
<div class="Column3SecondOne">
<!-- 性别统计 -->
<div class="Column3SecondOne--sex">
<div class="title-header">
<img src="/@/assets/images/screen/title-short-bg.png"/>
<span class="label">男⼥⽐例</span>
</div>
<IntervalLineProgress :options="sexStatics"></IntervalLineProgress>
</div>
<!-- 是否组团统计 -->
<div class="Column3SecondOne--isgroup">
<div class="title-header">
<img src="/@/assets/images/screen/title-short-bg.png"/>
<span class="label">散客、团队⼈数占⽐</span>
</div>
<IntervalLineProgress :options="groupStatics"></IntervalLineProgress>
</div>
</div>
</template>
打包代码运⾏
问题描述
在给同事介绍Vue3的时候，他问我静态资源打包放到 服务器上的时候（后台⼯程包含⼯程名），如果直接使⽤ “@” 作为根⽬录肯定会报错，我突发发现我还没有尝试⽤Vue3 打包，⼯程上下⽂还不清楚，于是⾃⼰尝试，发现打包不成功，提⽰不到资源⽂件
解决办法
查看了 VueCli 官⽹，，提⽰
静态资源可以通过两种⽅式进⾏处理：
在 JavaScript 被导⼊或在 template/CSS 中通过相对路径被引⽤。这类引⽤会被 webpack 处理。
放置在 public ⽬录下或通过绝对路径被引⽤。这类资源将会直接被拷贝，⽽不会经过 webpack 的处理。
于是⾃⼰将 html 和 CSS 资源⽂件的引⼊全部改为了相对路径，打包成功，如图
html 引⽤public⽬录下的资源⽂件
将第三⽅资源放到public ⽬录下⾯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon"href="/favicon.ico"/>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<!-- 使⽤vite 转换引⽤ -->
<script src="/asserts/js/echarts.min.js"></script>
<script src="/asserts/js/china.js"></script>
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module"src="/src/main.js"></script>
</body>
</html>
Vue 使⽤相对路径引⼊资源
<img src="../../assets/images/error404.png"alt="">
CSS 使⽤相对路径引⼊资源
.ageStatics-bg{
background-image:url(../../../assets/images/screen/circle-charg-bg.png);
background-size: cover;
height: 1.6rem;
width: 1.6rem;
margin: 0 auto;
}