Vue.js－Vue CLI 3.x 靜態資源文件編譯輸出目錄定製的問題及解決

第一步：定製靜態資源根目錄

這一步是Vue工程配置的基本操做，在Vue CLI官方文檔講的很明確了，在vue.config.js中配置assetsdir屬性便可。

未設置或設置爲默認值assetsdir: ''，生成的目錄是這樣的：

指定明確的目錄，即生成相對於publicPath的路徑，如assetsdir: './assets'或者assetsdir: 'assets'，生成的目錄是這樣的：

這樣使得目錄結構更清晰明瞭。

第二步：區分靜態資源與動態生成的資源

若是在工程中已經提供了一部分全局靜態資源，如normalize.css，爲保持目錄的統一可能也放置在public/assets/css目錄下，這樣，在最終的編譯輸出中，文件可能被大量的chunk-文件淹沒。

這樣咱們須要給輸出的文件單獨設置子目錄，因而能夠設置css的extract屬性，在開發環境時，咱們能夠直接設置爲true以啓用css文件的抽離，在生產環境則能夠直接指定生成的chunkFile的目錄。

css: {
    extract: process.env.NODE_ENV === 'development' || {
        chunkFilename: 'assets/css/chunk/[name]-[hash].css',
    },
},
複製代碼

運行編譯咱們能夠獲得這樣的目錄結構

第三步：踩坑

若是在源碼中存在相對路徑的引用，編譯過程將會自動進行處理，如字體、圖片等，經過查詢Vue CLI的源碼，發現其是採用filename的值來計算相對路徑的深度的。而filename默認路徑爲./assets/css/file.css，所以第二步中咱們設定chunkFilename多了一層目錄chunk，致使資源路徑引用出現404錯誤。因此filename與chunkFilename能夠不在同一目錄，但必定要保持相同的層級深度。

// use relative publicPath in extracted CSS based on extract location
const cssPublicPath = process.env.VUE_CLI_BUILD_TARGET === 'lib'
    // in lib mode, CSS is extracted to dist root.
    ? './'
    : '../'.repeat(
    extractOptions.filename
        .replace(/^\.[\/\\]/, '')
        .split(/[\/\\]/g)
        .length - 1
)
複製代碼

css: {
    extract: process.env.NODE_ENV === 'development' || {
        // filename必須與chunkFilename層級一致，\node_modules\@vue\cli-service\lib\config\css.js 42行
        filename: `assets/css/[name]/[name]-[hash].css`,
        chunkFilename: 'assets/css/chunk/[name]-[hash].css',
    },
},
複製代碼

第三步：js文件的編譯輸出

js文件的編譯輸出則比較靈活一些，在configureWebpack方法中能夠進行更多的操做，也沒有filename與chunkFilename路徑綁定的問題，此處給出簡單的示例。

configureWebpack () {
    let config = {
      plugins: [],
    }
    if (process.env.NODE_ENV === 'production') {
        config.output = {
            filename: (chunkData) {
                // 經過chunkData能夠根據chunkData.chunk.name進行更多區分
                return `[name]/[name]-${hash}.js`
            },
            chunkFilename: `assets/js/chunk/[id]-[hash].js`,
        }
    }
    // 一些其餘的插件設置
    // 最終返回配置
    return config
}
複製代碼