學習前端的小伙伴越來越多，問題也就越多，前面基礎部分還好一些，特別是一到框架的時候，難住了一大部分人，今天小猿圈web前端講師就為大家總結了vue-cli項目打包完成后運行文件路徑報錯問題，有興趣的小伙伴可以看一下。

剛新建的vue-cli項目，同事說要打包一版進行測試，打包完成后放在tomcat上發現路徑報錯問題。

百度了一下，懷疑是build里面沒有定義路徑問題，度友提供了解決方案：

找到config文件夾下的index.js文件，修改路徑代碼

找到build對象，修改屬性assetsPublicPath為‘./'

但是由于vue-cli項目中已經沒有config文件夾，需要在根目錄下創建vue.config.js

具體配置網上查了一下，用了一個推薦的配置：

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項目打包完成后運行文件路徑報錯問題的介紹，希望無論是初學還是專業前端，都能找到適合自己操作的框架，學習前端如果有不懂得地方可以到小猿圈網站尋找答案，里面有專業的講師團隊還有優秀的助教老師，等你來學習。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。