nuxtjs如何部署cdn及区分发布环境

Posted 2021-03-25 古兰精

1、部署cdn

　　nuxt  build 后的前端资源都会存放在.nuxt/dist/ 文件夹下面

　　img 目录存放的是使用到的图片资源，无论是开发中存放在 assets 文件夹里的，还是static里的，都会统一生成到该目录里

　　layouts 目录存放是layout 的布局js

　　pages 目录存放的是路由页面的js

　　其他的文件为nuxt创建的一些公共库和配置文件

　　所以部署cdn的时候，只要将 dist 文件夹推送到cdn服务器就行了

　　然后下一步更改 publicPath ，这样子在nuxt build 的时候，静态资源就会自动初始化到publicPath 路径下

　　修改nuxt.config.js，在build 加上 publicPath配置。注意的是后面的

　　注意，路径后面的‘/’ 不能忽略，假如忽略了之后，publicPath: ‘http://cdn.modb.pro/_nuxt’，js会路径会正常，但是img路径不正常

  build: {
    publicPath: process.env.PATH_TYPE === ‘gray‘ ? ‘/_nuxt/‘ : ‘https://cdn.modb.pro/_nuxt/‘,
    parallel: true,
    transpile: [/^element-ui/],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    },
    filenames: {
      chunk: ‘modb.2.6.[id].js‘
    }
  }

2、区分发布环境

　　在 Nuxt.js 项目中，我们有一个全局的环境变量 process.env.NODE_ENV，默认情况下，这个变量的值要么是 production，要么是 development，分别表示生产环境和开发环境。而我们需要的环境可能不止这两种，我们还需要测试环境、预生产环境等等

　　现在就是我的测试环境不加cdn，生产环境需要加cdn，那么就需要设置一下全局环境变量

　　利用cross-env

  "scripts": {
    "dev": "nuxt",
    "gray": "cross-env PATH_TYPE=gray nuxt build",
    "build": "cross-env PATH_TYPE=production nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

　　nuxt.config.js里加入

  env: {
    PATH_TYPE: process.env.PATH_TYPE
  },

　　利用环境变量区分

publicPath: process.env.PATH_TYPE === ‘gray‘ ? ‘/_nuxt/‘ : ‘https://cdn.modb.pro/_nuxt/‘,