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

一、部署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' } }

二、区分发布环境

　　在 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/',