我們需要在template昂秃，script禀梳，style下引用圖片，如下肠骆。
比如
<!-- xxx.vue里面的template標(biāo)簽里面的代碼 -->
<img class="img_fyg" src="../../assets/feiyi/img_fyg.png" alt />
/* css 代碼 */
background-image: url("../../assets/meishu/bg_msg-black.png");
// js代碼
"../../assets/feiyi/img_fyg.png"
// 或者
require("@assets/feiyi/feiyi_item_big.jpg")
這里能用@assets是因?yàn)樵?code>vue.config.js里面設(shè)置了如下參數(shù)算途。
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
lintOnSave: true,
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('./src'))
.set('@assets', resolve('./src/assets'))
},
};
本地開發(fā)的時(shí)候，因?yàn)橛蛎?code>http://localhost:8080蚀腿，也就是/嘴瓤，vue自動(dòng)幫你轉(zhuǎn)換成相對(duì)/路徑。
build的時(shí)候莉钙，vue默認(rèn)把圖片路徑指定在/下廓脆。圖片地址也就是在/img/xxx.jpg。
如果項(xiàng)目部署在域名是http://www.aaa.com/vue/磁玉，/img/xxx.jpg自然找不到圖片停忿。
我們build的時(shí)候需要指定一個(gè)路徑/vue/，因?yàn)?code>vue/img/xxx.jpg是正確的路徑蜀涨。
修改vue.config.js配置即可瞎嬉。
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
lintOnSave: true,
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('./src'))
.set('@assets', resolve('./src/assets'))
},
publicPath:'/vue/'
};
