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