vue-cli 項目打包完成后運行文件路徑報錯問題
本文介紹了vue-cli 項目打包完成后運行文件路徑報錯問題,做個筆記,也分享給大家。
剛新建的vue-cli項目,同事說要打包一版進行測試,打包完成后放在tomcat上發(fā)現(xiàn)路徑報錯問題。
百度了一下,懷疑是build里面沒有定義路徑問題,度友提供了解決方案:
找到config文件夾下的index.js文件,修改路徑代碼
找到build對象,修改屬性assetsPublicPath為 ‘./'
但是由于vue-cli項目中已經(jīng)沒有config文件夾,需要在根目錄下創(chuàng)建vue.config.js
具體配置網(wǎng)上查了一下,用了一個推薦的配置:
module.exports = { baseUrl: '/', outputDir: 'dist', lintOnSave: true, runtimeCompiler: true, //關鍵點在這 // 調(diào)整內(nèi)部的 webpack 配置。 // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // 配置 webpack-dev-server 行為。 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理 proxy: null, // string | Object before: app => {} } }
但是這個配置打包完之后依舊報錯,看了原因,是baseUrl: '/'的路徑還是有問題,把路徑改為baseUrl: './'就能找到對應的路徑了,以下為修改后代碼:
module.exports = { baseUrl: './', outputDir: 'dist', lintOnSave: true, runtimeCompiler: true, //關鍵點在這 // 調(diào)整內(nèi)部的 webpack 配置。 // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // 配置 webpack-dev-server 行為。 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理 proxy: null, // string | Object before: app => {} } }
結果:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue+axios+element ui 實現(xiàn)全局loading加載示例
今天小編就為大家分享一篇vue+axios+element ui 實現(xiàn)全局loading加載示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09如何解決Element UI el-dialog打開一次后無法再次打開問題
這篇文章主要介紹了如何解決Element UI el-dialog打開一次后無法再次打開問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)(推薦)
這篇文章主要介紹了Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng),需要的朋友可以參考下2019-12-12