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, //關(guā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à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é)果:

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面
本文給大家分享了vue實現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面的一個功能,有這方便需要的朋友學習參考下吧。2018-01-01
vue+axios+element ui 實現(xiàn)全局loading加載示例
今天小編就為大家分享一篇vue+axios+element ui 實現(xiàn)全局loading加載示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
基于VUE實現(xiàn)判斷設(shè)備是PC還是移動端
這篇文章主要介紹了基于VUE實現(xiàn)判斷設(shè)備是PC還是移動端,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
如何解決Element UI el-dialog打開一次后無法再次打開問題
這篇文章主要介紹了如何解決Element UI el-dialog打開一次后無法再次打開問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)(推薦)
這篇文章主要介紹了Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng),需要的朋友可以參考下2019-12-12

