vue-cli 項目打包完成后運行文件路徑報錯怎么辦

小編給大家分享一下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 => {}
 }
}

結果：

以上是“vue-cli 項目打包完成后運行文件路徑報錯怎么辦”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！