Vue项目打包发布到服务器出现的图片 与服务器部署问题

问题打包的项目没有放在服务器的根目录下的解决办法

1 . 修改路径位置，解决空白页问题。 VUE项目的config文件夹下的index.js文件，找到build的配置 默认是这样：

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

修改之后

  build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
//这个是打包的路径
assetsPublicPath: '', 或者assetsPublicPath: './'

2.解决背景图片不显示问题。

打包后的css文件夹内app.css文件访问static/img/’图片名’，路径错误访问不到图片。 修改位于项目目录中的build文件夹/utils.js，在如下图所示位置添加上publicPath:'../../' 改前：

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

改后：

        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            // 如果打包的文件  没放在服务器的根部目录下  图片路径 是这个 ，是根目录可以不填
            publicPath:'../../'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
      }