vue的环境配置 生产环境和开发环境配置

vue的环境配置 – 生产环境和开发环境配置 简单配置

vue本身就已经自带了serve环境变量（development）和build环境变量（production）
可直接在api文件（request.js）中写：

// 不同环境不同地址
const apis = {
  production: 'http://www.api.lalala.com', // 线上 (生成环境)
  development: 'http://192.168.8.***:80', // 本地 (开发环境)
  accessHomeData: 'http://www.xmyxapp.com' // 其他api
}

// ajax请求设置
const ajax = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? apis.production : apis.development
})

重点在与 process.env.NODE_ENV === ‘production’ ? apis.production : apis.development
上面使用了axios

基础项目配置

1.在src同级目录下创建.env.development和.env.production
2.配置文件的配置内容
.env.production 这个文件配置的是生产环境的变量，放置线上访问的路径

NODE_ENV = 'development'  // 模式
VUE_APP_MODE = 'development'  // 通过"VUE_APP_MODE"变量来区分环境
VUE_APP_API_URL = 'http://192.****:8008/api/' // api地址

3.修改vue.config.js - 可不修改

module.exports = {
    // 部署应用时的基本 URL
    // 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath
    // 基本路径,相对路径  或其他别名
    publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
    // 输出文件目录
    outputDir: 'dist',
    // ...
    }

4.修改package.json文件 - 可不修改
有相应的可不修改 vue会自动标识 development production

    "dev": "vue-cli-service serve --mode development",
    "test": "vue-cli-service serve --mode production",

5.在 request.js 中进行使用

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// 或
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.VUE_APP_BASE_URL,
    // 超时
    timeout: 100000
})