vue2自己写的脚手架怎么设置环境变量

在Vue2自己写的脚手架中，可以通过以下步骤设置环境变量：

1. 在项目根目录下创建一个`.env`文件，并在其中设置环境变量，例如：

VUE_APP_API_URL=http://localhost:3000

2. 在代码中使用环境变量，例如：

axios.get(`${process.env.VUE_APP_API_URL}/api/users`)

3. 在`package.json`的`scripts`中设置环境变量，例如：

"dev": "cross-env NODE_ENV=development VUE_APP_API_URL=http://localhost:3000 vue-cli-service serve"

使用`cross-env`可以跨平台设置环境变量，`NODE_ENV`是Vue默认的环境变量，`VUE_APP_API_URL`是自定义的环境变量。

4. 在Webpack的配置文件中设置环境变量，例如：

new webpack.DefinePlugin({
  'process.env': {
    VUE_APP_API_URL: JSON.stringify(process.env.VUE_APP_API_URL)
  }
})

这样就可以在代码中使用`process.env.VUE_APP_API_URL`获取环境变量了。

相关问题

vue-cli 环境变量配置

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它提供了一套完整的脚手架工具，可以帮助开发者快速搭建 Vue.js 项目。在 Vue CLI 中，可以通过配置环境变量来实现不同环境下的配置。

Vue CLI 支持在项目根目录下创建一个 `.env` 文件，用于设置全局的环境变量。在该文件中，可以定义不同环境下的变量，例如：

VUE_APP_BASE_URL=http://api.example.com

上述配置中，`VUE_APP_BASE_URL` 是一个自定义的环境变量，可以在项目中通过 `process.env.VUE_APP_BASE_URL` 来访问。

除了 `.env` 文件外，Vue CLI 还支持根据不同环境创建对应的 `.env.[mode]` 文件，其中 `[mode]` 是环境的名称，例如 `.env.development`、`.env.production` 等。这样可以针对不同的环境设置不同的变量在项目中使用环境变量时，可以在代码中通过 `process.env` 来访问。例如，在 Vue 组件中可以这样使用：

<template>
  <div>
    <p>API Base URL: {{ apiUrl }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.VUE_APP_BASE_URL
    }
  }
}
</script>

这样就可以根据不同的环境配置，动态获取对应的 API Base URL。

vue2脚手架，如何使用env

在Vue2脚手架中，我们可以使用`env`来配置环境变量。以下是具体步骤：

1. 在项目根目录下创建`.env`文件，用于存放全局的环境变量。例如：

VUE_APP_BASE_URL=http://localhost:3000/api

在`.env`文件中，我们可以定义任意数量的环境变量，每个变量以`VUE_APP_`开头，并使用`=`号将变量名和变量值分隔。

2. 在Vue项目的代码中，使用`process.env.VUE_APP_`来引用环境变量。例如：

import axios from 'axios'

axios.get(`${process.env.VUE_APP_BASE_URL}/users`)
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

在以上代码中，我们使用`process.env.VUE_APP_BASE_URL`来拼接请求URL，这样就可以根据不同的环境自动切换baseURL了。

需要注意的是，Vue2脚手架会自动加载`.env`文件中的环境变量，并将这些变量注入到Webpack的环境变量中。如果你需要在Webpack配置文件中使用这些环境变量，可以通过以下方式来获取它们：

const BASE_URL = process.env.VUE_APP_BASE_URL

在Webpack配置文件中，我们可以直接使用`process.env.VUE_APP_`来引用环境变量。