Vue打包部署到服务器-找不到静态资源404错误

问题描述

运行之后正常，npm run build打包正常，发布服务器静态资源丢失 。

报错截图

导致原因

打包后的资源使用了绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路径无法被正确解析。

解决方法

步骤一：更改config文件夹下index.js(config -> index.js -> build对象)资源发布路径
下面展示一些 内联代码片。

//change code like this
 assetsPublicPath: './',

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

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
      /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

步骤二：更改build文件夹下的utils.js代码
下面展示一些 内联代码片。

// add code block
 publicPath:'../../'

// An highlighted block
 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }