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

zhonglinke 2019-11-13 原文

先找到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"
  },

环境篇（了解项目环境）

　1. dev环境

　　"dev": "cross-env NODE_ENV=development nuxt"

预生产环境

　　"pre": "cross-env NODE_ENV=prerelease nuxt",

生产环境

　　"pro": "cross-env NODE_ENV=production nuxt",

2.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

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

NODE_ENV = "自定义名称" 



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

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

}

2. 线上环境的请求配置

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

在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  预发布 /pre

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