.env.development 和.env.production,vue2中在哪里来进行动态切换
时间: 2023-08-25 19:28:04 浏览: 222
Vue实现active点击切换方法
在Vue2中,`.env.development`和`.env.production`文件的使用方式与Vue3是一样的。只不过在Vue2中需要手动安装`dotenv`库来读取`.env.*`文件中定义的环境变量。
安装`dotenv`库:
```
npm install dotenv --save-dev
```
在Vue2中,我们可以在`webpack`的配置文件中使用`dotenv-webpack`插件来加载`.env.*`文件中定义的环境变量。下面是一个示例:
```
// webpack.config.js
const Dotenv = require('dotenv-webpack')
module.exports = {
// ...
plugins: [
// 加载 .env 文件
new Dotenv({
path: process.env.NODE_ENV === 'production' ? '.env.production' : '.env.development'
})
],
// ...
}
```
上面的代码中,我们使用`Dotenv`插件来加载`.env.*`文件中定义的环境变量。根据`process.env.NODE_ENV`的值来选择加载`.env.production`或`.env.development`文件。
在Vue2中,如果需要在代码中使用`.env.*`文件中定义的环境变量,可以使用`process.env`对象来访问。例如:
```
// main.js
console.log(process.env.VUE_APP_TITLE)
```
上面的代码中,我们访问了`.env.*`文件中定义的`VUE_APP_TITLE`环境变量。需要注意的是,在Vue2中,需要以`VUE_APP_`前缀开头的环境变量才会被加载到`process.env`对象中。
阅读全文