目录

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

(一)、介绍

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

 

Logo

前往低代码交流专区

更多推荐