問(wèn)題現(xiàn)象：用vue框架開(kāi)發(fā)的一個(gè)demo項(xiàng)目，在本地測(cè)試運(yùn)行都是可以的，后來(lái)需要放到服務(wù)器上，用nginx做代理，結(jié)果客戶說(shuō)找不到打包后的靜態(tài)資源，瀏覽器控ne制臺(tái)錯(cuò)誤代碼404，請(qǐng)求控制臺(tái)network報(bào)了一個(gè)css，js資源找不到404。于是開(kāi)始找尋解決方法了。。。

因?yàn)榉?wù)器上線方式的調(diào)整，不會(huì)把項(xiàng)目放在根路徑，https://192.168.10.35/static/css/app.f0b3e516f7ecc68501f83a83a9ae54a2.css 這個(gè)文件找不到，看看我們正常打包好的目錄。

正確的訪問(wèn)路徑是：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
  }
}

思來(lái)想去之前打包好的文件直接扔到nginx就可以使用，實(shí)在不清楚原因。后來(lái)經(jīng)過(guò)運(yùn)維小姐姐的排查后，總結(jié)了一下想想可能問(wèn)題還是在前端打包時(shí)webpack配置路徑發(fā)生了問(wèn)題。憑著感覺(jué)嘗試著改了下面一些代碼（抱著試一試的感覺(jué)(●ˇ?ˇ●)~）

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打包后會(huì)出現(xiàn)https://192.168.10.35/fcyptstatic/css/app.149f36018149fcbe537f02cafdc6f047這樣的情況。

看下打包好的目錄，對(duì)比之后會(huì)發(fā)現(xiàn)多了一層fcypt目錄，這個(gè)多出來(lái)的路徑是index和assetsRoot這兩個(gè)設(shè)置決定的。

然后放到服務(wù)器上，哈哈，圓滿解決了~~

最后總結(jié)了一下~

問(wèn)題的原因是服務(wù)器要配置多個(gè)項(xiàng)目，從而沒(méi)有指定項(xiàng)目目錄，因此需要在打包時(shí)對(duì)打包文件添加訪問(wèn)的項(xiàng)目名稱，所以在配置打包路徑是要加上項(xiàng)目名稱。

webpack是真的不熟練呀，下面配上點(diǎn)vue cli默認(rèn)webpack config／index.js的配置解釋（怕自己忘了，好記性不如爛筆頭嘛~）

  var path = require('path')
  
   module.exports = {
      build: { // production 環(huán)境
        env: require('./prod.env'), // 使用 config/prod.env.js 中定義的編譯環(huán)境
        index: path.resolve(__dirname, '../dist/index.html'), // 編譯輸入的 index.html 文件
        assetsRoot: path.resolve(__dirname, '../dist'), // 編譯輸出的靜態(tài)資源路徑
        assetsSubDirectory: 'static', // 編譯輸出的二級(jí)目錄
        assetsPublicPath: '/', // 編譯發(fā)布的根目錄，可配置為資源服務(wù)器域名或 CDN 域名
        productionSourceMap: true, // 是否開(kāi)啟 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, // 是否開(kāi)啟 gzip
        productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 壓縮的文件擴(kuò)展名
     },
     dev: { // dev 環(huán)境
       env: require('./dev.env'), // 使用 config/dev.env.js 中定義的編譯環(huán)境
       port: 8080, // 運(yùn)行測(cè)試頁(yè)面的端口
       assetsSubDirectory: 'static', // 編譯輸出的二級(jí)目錄
       assetsPublicPath: '/', // 編譯發(fā)布的根目錄，可配置為資源服務(wù)器域名或 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 // 是否開(kāi)啟 cssSourceMap
    }
 }