學習前端的小伙伴越來越多煌寇，問題也就越多樟遣，前面基礎部分還好一些酬蹋，特別是一到框架的時候，難住了一大部分人左冬，今天小猿圈web前端講師就為大家總結了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, //關鍵點在這
// 調整內部的 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, //關鍵點在這
// 調整內部的 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 => {}
}
}
以上就是小猿圈web前端講師對于vue-cli項目打包完成后運行文件路徑報錯問題的介紹，希望無論是初學還是專業(yè)前端悲敷，都能找到適合自己操作的框架web前端自學②群：738735873究恤，學習前端如果有不懂得地方可以到小猿圈網(wǎng)站尋找答案，里面有專業(yè)的講師團隊還有優(yōu)秀的助教老師后德，等你來學習部宿。
