十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
小編給大家分享一下vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報錯怎么辦,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
為應(yīng)縣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及應(yīng)縣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、做網(wǎng)站、應(yīng)縣網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
問題:
剛新建的vue-cli項(xiàng)目,同事說要打包一版進(jìn)行測試,打包完成后放在tomcat上發(fā)現(xiàn)路徑報錯問題。
百度了一下,懷疑是build里面沒有定義路徑問題,度友提供了解決方案:
找到config文件夾下的index.js文件,修改路徑代碼
找到build對象,修改屬性assetsPublicPath為 ‘./'
但是由于vue-cli項(xiàng)目中已經(jīng)沒有config文件夾,需要在根目錄下創(chuàng)建vue.config.js
具體配置網(wǎng)上查了一下,用了一個推薦的配置:
module.exports = { baseUrl: '/', outputDir: 'dist', lintOnSave: true, runtimeCompiler: true, //關(guān)鍵點(diǎn)在這 // 調(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: './'就能找到對應(yīng)的路徑了,以下為修改后代碼:
module.exports = { baseUrl: './', outputDir: 'dist', lintOnSave: true, runtimeCompiler: true, //關(guān)鍵點(diǎn)在這 // 調(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 => {} } }
結(jié)果:
以上是“vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報錯怎么辦”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!