VUE配置多开发环境/静态配置文件修改地址

目录

一、配置开发/生产等多种环境

（一）、介绍

1、.env文件

2、.env文件格式

（二）、development和production环境配置

二、使用window对象，通过外部配置文件显示修改地址

（一）、window对象

（二）、使用静态配置文件

---

在日常开发中，常需要区分开发环境、生产环境等，配置不同的接口地址。在vue-cli中可以使用.env文件配置不同的开发环境。

一、配置开发/生产等多种环境

（一）、介绍

1、.env文件

        .env 文件是全局默认配置文件，如果不配置环境，默认会加载.env文件。但如果指定了环境，指定环境的优先级要高于.env文件。比如：

        .env.development 文件是开发环境配置。（npm run serve命令默认加载开发环境.env.development）

        .env.production 文件是生产环境配置。（npm run build命令默认加载生产环境.env.production）

文件命名规则如下：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
# .local 只在本地有效，在[mode]模式下会被载入，但会被 git 忽略

2、.env文件格式

        文件只包含环境变量的“键=值”对。这些环境变量将会随着构建打包嵌入到输出代码中。（PS：不要用空格将等号隔开，空格也算名称内容。）

        只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

• NODE_ENV 指定应用运行模式。其值为 "development"、"production" 或 "test" 。
• BASE_URL 和 vue.config.js 中的 publicPath 选项相符，也就是应用会部署到的基础路径。
• 可以以VUE_APP_开头自定义键名，可以在代码中使用 process.env.VUE_APP_XXX 来访问。

模式和环境变量 | Vue CLI

（二）、development和production环境配置

1、在项目根目录下新建不同环境的对应文件

        这里配置开发环境development和生产环境production。

开发环境：.env.development文件

# 注意不要有空格
NODE_ENV='development'
# 添加开发环境的接口url前缀。也可以直接配置开发环境地址，而不使用下面第3步的代理配置
VUE_APP_BASE_API='/api'

生产环境：.env.production文件

NODE_ENV='production'
# 设置生产环境地址
VUE_APP_BASE_API='http://xxx.xxx.xxx.xxx:xxxx'

        上述地址需要VUE_APP_开头，可以通过process.env.VUE_APP_BASE_API使用

2、在axios中使用配置文件中的地址

import axios from 'axios'
axios.defaults.timeout = 10000
# 配置axios的baseURL
axios.defaults.baseURL = process.env.VUE_APP_BASE_API

export default axios

3、配置开发环境代理

        上述步骤的开发环境配置为每一个接口地址加上的/api前缀，这里再通过配置开发环境代理设置代理地址并重写URL。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8888',
        pathRewrite: {'^/api': ''},
        ws: false,
        changeOrigin: true
      }
    }
  }
})

4、配置运行脚本

        修改package.json文件的运行脚本，使用“--mode development/production”加载需要的开发环境。

        这里的 serve命令会自动加载.env.development，build命令会自动加载.env.production命令，下面的脚本命令可以不进行修改。

"scripts": {
	"serve": "vue-cli-service serve",
	"build": "vue-cli-service build"
},
 或
"scripts": {
	"serve": "vue-cli-service serve --mode development",
	"build": "vue-cli-service build --mode production"
},

二、使用window对象，通过外部配置文件显示修改地址

（一）、window对象

        window 对象是 JavaScript 中的全局对象，它表示浏览器窗口或标签页，是 JavaScript 中访问和操作浏览器窗口的入口点。在浏览器环境中，每个打开的标签页或窗口都有一个对应的 window 对象。

  window对象提供了许多属性和方法，用于处理浏览器窗口和与用户交互。一些常见的window 对象的属性和方法包括：

• window.alert(message): 在浏览器中显示一个警告框，带有指定的消息。
• window.prompt(message, default): 在浏览器中显示一个提示框，要求用户输入文本。
• window.confirm(message): 在浏览器中显示一个确认框，要求用户点击确定或取消按钮。
• window.location: 用于获取或设置当前页面的 URL 信息。
• window.document: 表示当前页面的文档对象，可以用于操纵页面的内容和结构。
• window.setTimeout(function, delay): 在指定延迟之后执行指定的函数。
• window.clearTimeout(timeoutID): 取消之前通过 setTimeout() 创建的延迟执行。

        此外，可以在 window 对象上存储数据或属性，并在整个页面中访问它们。例如，在全局范围内声明一个变量或函数：

window.myV = 1;
window.myFunction = function() {
  console.log('Hello, world!');
};

        之后，可以在页面的任何地方使用 myV 变量、调用 myFunction() 函数。

        PS：如果在浏览器环境之外使用 JavaScript（例如在 Node.js 中），则没有 window 对象，因为它是浏览器提供的全局对象。

（二）、使用静态配置文件

        思路：在js中向window对象将基础路径baseUrl作为全局变量存储，然后在axios中访问它，并设为axios的基础路径。（此js文件作为静态配置文件放在static文件夹下，然后在index.html中引入即可在项目其他位置使用。）

1、在项目目录public/static文件夹下新建配置文件

(function () {
    window.SITE_CONFIG = {}
    // api接口请求地址  这里写后端要请求的接口地址
    window.SITE_CONFIG['baseUrl'] = ''
})()

2、在index.html文件中引入

<script src="./static/config.js"></script>

3、在axios中使用配置文件中的地址

import axios from 'axios'
axios.defaults.timeout = 10000
axios.defaults.baseURL = window.SITE_CONFIG.baseUrl

export default axios