.env.development 和.env.production，如何在vue.config.js中引入

在 `vue.config.js` 中，可以使用 `dotenv-webpack` 插件来引入 `.env.development` 和 `.env.production` 文件。具体步骤如下：

1. 安装 `dotenv-webpack` 插件：

npm install dotenv-webpack --save-dev

2. 在 `vue.config.js` 中引入 `dotenv-webpack` 插件：

const Dotenv = require('dotenv-webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new Dotenv({
        path: process.env.NODE_ENV === 'production' ? './.env.production' : './.env.development',
      }),
    ],
  },
};

上述配置中，根据 `process.env.NODE_ENV` 的值来选择加载 `.env.development` 或 `.env.production` 文件。

注意，需要在 `.gitignore` 文件中添加对 `.env.*` 文件的忽略，以避免敏感信息被提交到代码库中。

相关问题

.env.development 和.env.production，vue2中在哪里来进行动态切换

在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`对象中。

.env.development 和.env.production，vue2脚手架中在哪里来进行动态切换

在Vue2的脚手架中，`.env.development`和`.env.production`文件的使用方式与Vue3是一样的。只不过在Vue2中需要手动安装`dotenv`库来读取`.env.*`文件中定义的环境变量。

安装`dotenv`库：

npm install dotenv --save-dev

在Vue2的脚手架中，我们可以通过在`config`目录下的`index.js`文件中配置来加载`.env.*`文件中定义的环境变量。下面是一个示例：

// config/index.js
const path = require('path')
const dotenv = require('dotenv')

// 加载 .env 文件
const envPath = process.env.NODE_ENV === 'production' ? '.env.production' : '.env.development'
const envResult = dotenv.config({ path: path.resolve(envPath) })
if (envResult.error) {
  throw envResult.error
}

module.exports = {
  // ...
}

上面的代码中，我们使用`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`对象中。