码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-10-24 13:20:21      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:项目   文件   如何   两种   color   parallel   不能   hunk   路由   

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

 

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

标签:项目   文件   如何   两种   color   parallel   不能   hunk   路由   

原文地址:https://www.cnblogs.com/goloving/p/11731496.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!