[JavaScript知识库]Vue打包部署到服务器-找不到静态资源404错误

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

参考：https://blog.csdn.net/AnnaF/article/details/105709569

问题描述

在本地运行正常，但是使用npm run build 上传服务器就总是报找不到静态资源。

原因

打包后的资源使用的是绝对路径，导致静态资源无法被找到。

解决办法

（1）更改config文件夹下index.js(config -> index.js -> build对象)资源发布路径：

// 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',

（2）更改build文件夹下的utils.js代码

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