vue-cli搭建的項目打包之后報“資源路徑錯誤&資源文件找不到“

此方式vue腳手架是3.0版本，2.0版本見最下面
//在項目的根目錄下（和package.json文件同級）新建一個文件vue.config.js的文件，將此段代碼復制進去。
module.exports = { baseUrl: '/', //在 baseUrl前面加個點baseUrl: './'
    outputDir: 'dist', lintOnSave: true, runtimeCompiler: true, chainWebpack: () => {}, configureWebpack: () => {}, devServer: { open: process.platform === 'darwin', host: 'localhost', port: 8080, https: false, hotOnly: false, proxy: null,
      before: app => {} } }

注：如果打包之后還不能解決問題，找到你項目里面router.js文件，將mode：‘ history ’注釋掉，如果還需要使用此模式，需要和后端進行配合使用，詳情請查看官方文檔 https://router.vuejs.org/zh/guide/essentials/history-mode.html

 2.0版本

1、在build文件下找到utils.js文件，添加publicPath:'../../',如下

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'   //添加此段代碼，保留背景圖片路徑原有的路徑地址
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

2、在config文件中找到index.js文件，修改如下

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', //將assetsPublicPath：'/'修改為assetsPublicPath: './'

/** * Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', productionGzip: false, productionGzipExtensions: ['js', 'css'], bundleAnalyzerReport: process.env.npm_config_report }