webpack run build 静态资源找不到404

问题现象：用vue框架开发的一个demo项目，在本地测试运行都是可以的，后来需要放到服务器上，用nginx做代理，结果客户说找不到打包后的静态资源，浏览器控ne制台错误代码404，请求控制台network报了一个css，js资源找不到404。于是开始找寻解决方法了。。。

因为服务器上线方式的调整，不会把项目放在根路径，https://192.168.10.35/static/css/app.f0b3e516f7ecc68501f83a83a9ae54a2.css 这个文件找不到，看看我们正常打包好的目录。

正确的访问路径是：192.168.10.35/fcypt/static/css/app.149f36018149fcbe537f02cafdc6f047

config/index.js配置如图：

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

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

思来想去之前打包好的文件直接扔到nginx就可以使用，实在不清楚原因。后来经过运维小姐姐的排查后，总结了一下想想可能问题还是在前端打包时webpack配置路径发生了问题。凭着感觉尝试着改了下面一些代码（抱着试一试的感觉(●ˇ∀ˇ●)~）

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

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist/fcypt'),
    assetsSubDirectory: 'static',

    /**
     * You can set by youself according to actual condition
     * You will need to set this if you plan to deploy your site under a sub path,
     * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
     * then assetsPublicPath should be set to "/bar/".
     * In most cases please use '/' !!!
     */
    // assetsPublicPath: '/vueAdmin-template/', // If you are deployed on the root path, please use '/'
    assetsPublicPath: '/fcypt/',

    /**
     * Source Maps
     */

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

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

这里需要注意assetsPublicPath:'/fcypt/' 末尾的斜杠一定要加，不然部分js打包后会出现https://192.168.10.35/fcyptstatic/css/app.149f36018149fcbe537f02cafdc6f047这样的情况。

看下打包好的目录，对比之后会发现多了一层fcypt目录，这个多出来的路径是index和assetsRoot这两个设置决定的。

然后放到服务器上，哈哈，圆满解决了~~

最后总结了一下~

问题的原因是服务器要配置多个项目，从而没有指定项目目录，因此需要在打包时对打包文件添加访问的项目名称，所以在配置打包路径是要加上项目名称。

webpack是真的不熟练呀，下面配上点vue cli默认webpack config／index.js的配置解释（怕自己忘了，好记性不如烂笔头嘛~）

  var path = require('path')
  
   module.exports = {
      build: { // production 环境
        env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
        index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件
        assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
        assetsSubDirectory: 'static', // 编译输出的二级目录
        assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
        productionSourceMap: true, // 是否开启 cssSourceMap
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false, // 是否开启 gzip
        productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名
     },
     dev: { // dev 环境
       env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境
       port: 8080, // 运行测试页面的端口
       assetsSubDirectory: 'static', // 编译输出的二级目录
       assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
       proxyTable: {}, // 需要 proxyTable 代理的接口（可跨域）
       // CSS Sourcemaps off by default because relative paths are "buggy"
       // with this option, according to the CSS-Loader README
       // (https://github.com/webpack/css-loader#sourcemaps)
       // In our experience, they generally work as expected,
       // just be aware of this issue when enabling this option.
       cssSourceMap: false // 是否开启 cssSourceMap
    }
 }