方法一
缺點(diǎn):需要和部署的路徑保持一致,不是很靈活
1、在環(huán)境變量.env中定義url前綴
BASE_URL=/admin/
2、定義vue路由前綴路徑router/index.js
const createRouter = () =>
new Router({
mode: 'history',
base: process.env.BASE_URL,
// mode: 'hash',
routes: constantRouterMap
})
.........
3、vue配置公共路徑前綴vue.config.js
const vueConfig = {
// publicPath: process.env.NODE_ENV === "development" ? "/" : "./",
publicPath: process.env.BASE_URL,
outputDir:'dist',
.........
4、打包部署到nginx或其他中間件,此時(shí)要保證前綴和部署的前綴保持一致
nginx
location /admin/ {
index index.html index.htm;
try_files $uri $uri/ /admin/index.html;
}
方法二
1、使用history模式
2、定義vue路由前綴路徑router/index.js
3、vue配置公共路徑前綴vue.config.js
// publicPath: process.env.NODE_ENV === 'development' ? '/' : './', // history改為 ’./‘ ,hash模式要’/‘,使用這種方法會(huì)導(dǎo)致圖片無法加載以及一些其他問題
開發(fā)環(huán)境使用/,部署到服務(wù)器上使用./文章來源:http://www.zghlxwxcb.cn/news/detail-672155.html
這種能保證靜態(tài)資源能訪問到,但是圖片訪問又有問題,需要再調(diào)整,比較麻煩,還會(huì)產(chǎn)生其它問題,history和hash模式配置還不一樣文章來源地址http://www.zghlxwxcb.cn/news/detail-672155.html
到了這里,關(guān)于[紹棠] Ant Design Pro of Vue打包有前綴靜態(tài)資源訪問不到的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!