Vue2.0教程 （二）开发环境生产环境变量配置

配置开发环境、生产环境

在根目录下新建 vue.config.js 文件，用于配置项目。

配置详情见：https://cli.vuejs.org/zh/config/#vue-config-js

2.1. 环境变量设置

通过在 package.json 里的 scripts 配置项中添加–mode xxx 来选择不同环境

只有以 VUE_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过 process.env.VUE_APP_API_URL访问

NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

配置

在项目根目录中新建.env.development , .env.production 等文件

• .env

serve 默认的本地开发环境配置

.env.development （开发环境配置）

NODE_ENV = "development"
VUE_APP_API_URL = "http://192.168.1.133:8080"

.env.production (打包环境配置)

NODE_ENV = "production"
VUE_APP_API_URL = "http://192.168.1.133:8080"

使用环境变量

<template>
  <div class="home">
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {
  },
  created() {
    // 使用接口
    console.log(process.env.VUE_APP_API_URL)
  }
}
</script>