vue-cli webpack配置cdn路徑 以及 上線之後的字型檔案跨域處理

昨天搞了一下vue項目打包之後靜态資源走阿裡雲cdn。

配置了半天，終于找到了設定的地方

config/index.js 裡面設定build 下的 assetsPublicPath 打包的時候便可以添加公共字首路徑

assetsSubDirectory: 'admin/static',  // 生成的檔案目錄
assetsPublicPath: 'https://cdn.xxxxx.com', // 添加路徑字首
           

這樣就可以修改掉打包的靜态資源的位址了，沒有修改之前打包完為 admin/static

修改之後為

https://cdn.xxxxx.com/admin/s...

上線之後發現字型檔案改用cdn會有跨域問題，nginx設定也可以。但是我這裡是把字型單獨處理了

在loader裡面 webpack.base.conf.js

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
            publicPath: '/admin/static'
    }
}
           

這樣,打包出來的除了字型檔案是按照檔案路徑的，其他的都會是cdn路徑

原文位址：

https://segmentfault.com/a/1190000017333733