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。
推薦閱讀:
- vue項目啟動命令個人學習記錄
- vue修改打包配置如何實現代碼打包後的自定義命名
- vue-cli中設置publicPath的幾種方式對比
- 詳解Vue項目的打包方式
- vue單頁面改造多頁面應用詳解第1/2頁