1. 程式人生 > >vue-cli webpack配置cdn路徑 以及 上線之後的字型檔案跨域處理

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