nuxtjs如何部署cdn及區分發布環境

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