背景
使用vue-cli創(chuàng)建的項(xiàng)目，我將圖片保存在了static目錄下惊窖，開(kāi)發(fā)時(shí)沒(méi)有問(wèn)題刽宪，圖片都能顯示。但部署到線上時(shí)爬坑，發(fā)現(xiàn)有的圖片能顯示纠屋，有的圖片不能顯示。檢查了一下元素盾计，發(fā)現(xiàn)能顯示的圖片是因?yàn)榫幾g的時(shí)候轉(zhuǎn)化為了base64格式售担，而沒(méi)有轉(zhuǎn)化的（大于預(yù)定義的大辛抟拧）圖片由于引用路徑不對(duì)，無(wú)法顯示族铆。網(wǎng)上查了很多vue項(xiàng)目中圖片引用相關(guān)的資料岩四，最后發(fā)現(xiàn)癥結(jié)處在于我將vue部署在了非項(xiàng)目根目錄，因此如果使用絕對(duì)路徑引用static目錄下的圖片時(shí)哥攘，會(huì)導(dǎo)致路徑不對(duì)剖煌。因此問(wèn)題就轉(zhuǎn)化為如何在非項(xiàng)目根目錄上部署vue項(xiàng)目。
解決方案
變量聲明
- 部署后的域名：
http://example.com/ - nginx的項(xiàng)目root：根域名的項(xiàng)目地址逝淹，如
/mydir/rootproject - vue網(wǎng)站目錄：
/mydir/rootproject/myproject/ - vue網(wǎng)站訪問(wèn)地址：
http://example.com/testH5 - vue網(wǎng)站主頁(yè)訪問(wèn)地址：
http://example.com/testH5/index.html - vue網(wǎng)站靜態(tài)文件目錄：
http://example.com/myproject/static
解決步驟
step1: 修改打包后靜態(tài)資源的路徑
這里我們需要改成絕對(duì)路徑耕姊。
build: {
...
assetsSubDirectory: 'static',
assetsPublicPath: '/myproject/' // 未修改前的配置為 '/'，
}
這樣靜態(tài)文件目錄就始終在http://example.com/myproject/static/這個(gè)路徑了栅葡。
step2：修改路由文件
的history模式下茉兰，所有的路由都是基于根路徑的，如/xxxx欣簇，現(xiàn)在我們時(shí)部署到/testH5下规脸，我們就要基于這個(gè)來(lái)修改路由。
vue-router有一個(gè)base屬性 https://router.vuejs.org/zh/…
base
類型: string
默認(rèn)值: "/"
應(yīng)用的基路徑熊咽。例如莫鸭，如果整個(gè)單頁(yè)應(yīng)用服務(wù)在 /app/ 下，然后 base 就應(yīng)該設(shè)為 "/app/"
修改路由代碼
const router = new Router({
mode: 'history',
base: '/testH5', // 這是新加的配置
...
})
這樣打包部署時(shí)就可以了横殴，但是開(kāi)發(fā)環(huán)境下這個(gè)就不對(duì)了被因，所以我們還要根據(jù)環(huán)境修改一下文件。
config/prod.env.js生產(chǎn)環(huán)境變量
module.exports = {
NODE_ENV: '"production"',
ROUTER_BASE: '"/testH5"'
}
config/dev.env.js開(kāi)發(fā)環(huán)境變量
module.exports = {
NODE_ENV: '"development"',
ROUTER_BASE: '"/"'
}
路由代碼
const router = new Router({
mode: 'history',
base: process.env.ROUTER_BASE, // 這是新加的配置
...
})
至此衫仑，打包配置的相關(guān)修改已全部完成氏身，項(xiàng)目也能夠正常訪問(wèn)。
step3: 修改nginx配置
location ~ /testH5 {
try_files $uri $uri/ /myproject/index.html;
}
/testH5就是部署的網(wǎng)站目錄惑畴。
step4: 修改圖片打包的路徑
step5: 引用圖片路徑使用相對(duì)路徑
圖片主要分為五種引用方式（均針對(duì)引用本地圖片，在線圖片直接寫具體的url地址航徙，不存在路徑問(wèn)題）：
（a） 使用img
?1. 靜態(tài)img如贷，<img src="../../static/xxx" />在img標(biāo)簽中通過(guò)src直接寫靜態(tài)圖片的路徑
?2. 動(dòng)態(tài)img，<img :src="require('../../static/xxx')" />在img標(biāo)簽中v-bind:src（簡(jiǎn)寫為:src）寫圖片路徑到踏，由于動(dòng)態(tài)圖片不會(huì)在編譯時(shí)解析路徑杠袱，因此需要使用require的方式引用
（b）在css樣式中直接使用背景圖
?3. 使用靜態(tài)背景圖的時(shí)候，圖片資源是通過(guò)css加載的窝稿，如background: url("../../static/xxx.png")楣富，打包后變成了url("static/xxx.png")，因此要修改build文件夾下的utils.js代碼
if (options.extract) {
return ExtractTextPlugin.extract({
use:loaders,
fallback: 'vue-style-loader',
**publicPath: '../../', ** // 新添加
})
}
 4. 使用動(dòng)態(tài)背景圖時(shí)（如通過(guò)條件判斷伴榔，active時(shí)用imgA纹蝴，否則用img）
`<div class="bg" />`在.bg樣式的background屬性中使用
`url("require('../../static/xxx')")`的方式動(dòng)態(tài)引入靜態(tài)圖片
（c）通過(guò)vue的data加載圖片再使用
?5. 在vue的data里用require引用圖片 image_bg: require('../../static/xxx.png')
使用：:style="{backgroundImage: 'url('+ image_bg + ')'}"
