阅读 152

nuxt 七牛上传cdn配置

一、 安装七牛云上传的webpack插件,网上有个现成的,执行命令:

yarn add qn-webpack
复制代码

二、配置nuxt.config.js

nuxt 会执行两个new webpack,通过isClient && !isDev只在client下执行。

const QiniuPlugin = require("qn-webpack");

const qiniuPlugin = new QiniuPlugin({
  accessKey: "", // 自己配置
  secretKey: "", // 自己配置
  bucket: "", // 自己配置
  path: "fe/dist/", // 与下面publicPath一致
  exclude: /(html|json)$/  // 忽略这两种后缀的不上传
})

  build: {
    extend (config, { isDev, isClient }) {
      
      if (isClient && !isDev) {
        config.output.futureEmitAssets = false 
        config.plugins.push(qiniuPlugin) // 添加插件
        config.output.publicPath = '//cdn.com/fe/dist/' // 自己配置
      }
    },
    publicPath: '/_nuxt/' // nuxt默认的
  }
复制代码

三、运行build 成功

四、运行start, 都是从cdn引用的