Vue 打包後相對路徑的引用問題

打包後相對路徑的引用

vue打包部署後,訪問是需要加上項目名

這時候訪問是使用絕對路徑就會處問題瞭。

解決辦法

把引用路徑改為相對路徑

解決JS、CSS等資源

打開build文件夾下的webpack.prod.conf.js,找到output,添加“ publicPath: ‘./’,”即可

或者打開config文件夾下的index.js,找到build,修改“assetsPublicPath: ‘./’”即可

解決圖片的引用問題

打開build文件夾下的utils.js,如下修改即可

vue cli打包相對路徑遇到的坑

<script src="/js/index.67b1c383.js"></script>  

這個是vue打包之後的絕對路徑,但是想要的是:

<script src="./js/index.67b1c383.js"></script>

這種相對路徑

網上說的,大部分解決方案是修改publicPath: './', ,但是實際測試之後,還是有很大的問題

第一種打包設置:publicPath: './',  結果:<script src="js/chunk-vendors.dbdd0915.js">  還是相對路徑

第一種打包設置:publicPath: '',   結果:<script src="js/chunk-vendors.dbdd0915.js">  也是相對路徑

第一種打包設置:publicPath: '../',   結果:<script src="../js/chunk-vendors.dbdd0915.js">  這個就非常神奇瞭,一個點的時候不行,2個點的時候,反而能行,不知道為啥。

publicPath: process.env.NODE_ENV === 'production' ? '././' : '/'

最後改成這個樣子居然可以瞭。

以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。

推薦閱讀: