Vue实现环境隔离

华超磊
240 阅读2分钟

环境隔离env

在开发中，我项目会分为几个阶段：

  • 生成阶段
  • 测试阶段
  • 开发阶段

每个阶段都会有不同的环境。那么不同环境旧有不同配置和服务信息比如：

  • 数据库信息
  • 中间件服务信息
  • 接口服务信息

所以如果做到无缝的切换的服务，便于开发就变得非常重要了。不论在前端还是在后端都有这种机制来完成响应操作。大部分理念相同。就环境隔离，大部分都是通过配置来完成

  • 服务端—nacos(统一配置中心)
  • 客户端：.env环境配置

具体实现步骤：

1：打开cn.vitejs.dev/guide/env-a…

2：在项目的跟目录下新建一个

.env                # 所有情况下都会加载
.env.[mode]         # 只在指定模式下加载

3:在根目录下 新建如下三个环境隔离文件

  • .env

    VITE_APP_TITLE=KVA后台管理系统-学相伴111

  • .env.devepoment

    ENV = 'development'
​
# 前端服务的端口
VITE_CLI_PORT = 8777
# 服务接口的前缀
VITE_BASE_API = /api
# 服务的基础路径
VITE_BASE_PATH = http://127.0.0.1:8989
​

  • .env.production

    ENV = 'production'
​
# 前端vite项目的端口
VITE_CLI_PORT = 8777
# 服务前缀
VITE_BASE_API = /api
#下方修改为你的线上ip
VITE_BASE_PATH = https://xxx.com
​

==定义的时候：注意一下细节：必须以VITE_开头才可以被后续的import.meta.env获取到==。

4： 配置以后如何使用————–js/vue页面使用

查看：cn.vitejs.dev/guide/env-a…

在你需要的js模块中或者vue页面中如果你要读取配置信息就直接使用：读取的方式：import.meta.env.配置文件中的key的名字

console.log("import.meta.env.VITE_BASE_PATH",import.meta.env.VITE_BASE_PATH)
console.log("import.meta.env.VITE_CLI_PORT",import.meta.env.VITE_CLI_PORT)
console.log("import.meta.env.VITE_BASE_API",import.meta.env.VITE_BASE_API)

比如：request.js

export default {
    method: 'get',
    // 基础url前缀
    baseURL: import.meta.env.VITE_BASE_PATH,
    // 请求头信息
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    },
    // 设置超时时间
    timeout: 30000,
    // 返回数据类型
    responseType: 'json'
}

5: html引入环境配置信息

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>%VITE_APP_TITLE%-%VITE_APP_STITLE%</title>
    <link rel="stylesheet" href="/css/loading.css">
  </head>
  <body>
    <div id="app">
      <div class="preload__wrap" id="Loading">
        <div class="preload__container">
          <p class="preload__name">欢迎使用</p>
          <div class="preload__loading"></div>
          <p class="preload__title">正在加载资源...</p>
          <p class="preload__sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
        </div>
        <div class="preload__footer">
          <a href="#" target="_blank">KVA后台管理系统-学相伴</a>
        </div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
​

6： 指定模式启动

查看：cn.vitejs.dev/guide/env-a…

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。

也就是说：

npm run dev其实就是等价于：vite --mode development
npm run build 其实就是等价于：vite --mode production

7： 注意事项

==修改了配置文件一定要重启才会生效==

avatar
文章
阅读
粉丝