Vue 2.x 3.x 配置项目开发环境跟线上环境

先找到package.json （这是nuxt版的vue 可能会跟一般vue不一样 当然总体上差不多的）

"scripts": {
    "dev": "cross-env NODE_ENV=development nuxt",
    "pro": "cross-env NODE_ENV=production nuxt",
    "pre": "cross-env NODE_ENV=prerelease nuxt",
    "build-prod": "cross-env NODE_ENV=production nuxt build",
    "build-prer": "cross-env NODE_ENV=prerelease nuxt build",
    "build-test": "cross-env NODE_ENV=development nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

环境篇（了解项目环境）

本地开发环境

• dev环境
  "dev": "cross-env NODE_ENV=development nuxt"

• 预生产环境
  "pre": "cross-env NODE_ENV=prerelease nuxt",

• 生产环境
  "pro": "cross-env NODE_ENV=production nuxt"

Prod上线 环境篇 命令行（num run build）

• 测试版上线打包
  "build-test": "cross-env NODE_ENV=development nuxt build",

• 预生产上线打包
  "build-prer": "cross-env NODE_ENV=prerelease nuxt build",

• 生产版上线打包
  "build-prod": "cross-env NODE_ENV=production nuxt build",

关于package.js 的命令讲解完了接下来解释一下

• NODE_ENV 就是项目全局的变量可自定义，定义的地方就是上门我们解读我们启动项目package.js命令里面（上面列举的环境篇)
• NODE_EVN = "自定义名称"

使用篇既然配置好了环境变量那么该怎么使用呢?

• 1.本地环境Axios请求的配置

    process.env.NODE_ENV 就是我们定义变量

• 例如在配置项目本地开发请求跟线上请求的时候做个判断

if (process.env.NODE_ENV == 'production') {
    //线上
  axios.defaults.baseURL = "https:xxx.xxx.xxx"
} else if (process.env.NODE_ENV == 'development') {
    //本地
  axios.defaults.baseURL = 'http://192.168.1.1:80'
} else {
    //预发布
  axios.defaults.baseURL = 'http://xxx.xxx.1.1:80' //
}

线上环境的请求配置

一般来说线上项目可能会有涉及到跨域的问题

• 在vue的配置文件可以设置 porxy跨域代理 (为什么axios不能跨域这个问题自己百度)
  
• vue项目一般来说依赖Node启动 vue跨域的原理就是在当前环境启动一个Node服务器 然后服务器跟服务器之前访问解决了跨域问题
  
• VueCli 2.x的项目的配置文件在根目录的 config - index.js 具体配置请自行百度

特别说明一下VueCli3.x 的环境配置 需要自己在根目录新建.env.development 或者.env.production 文件

// .env.development
NODE_ENV = 'development' 
VUE_APP_CURRENTMODE = 'dev' 
VUE_APP_BASEURL = '本地开发api地址'
//例如
VUE_APP_BASE_API='192.xxx.xxx.1:80'

新出的VueCli3搭建的项目运行很快不得不点赞

• VueCli 3.x的跨域配置 根目录 自行新建个 vue.config.js文件 自行配置 线上/api 预发布

module.exports = {
    // 修改的配置
    // 将baseUrl: '/api',改为baseUrl: '/',
    baseUrl: '/',
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.example.org',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
        }
    }
}

Vue 2.x 3.x 配置项目开发环境跟线上环境

原文：https://www.cnblogs.com/zhonglinke/p/11848223.html