webpack环境变量 和 vite 环境变量

前篇博客为详解vue多环境配置, 此篇为如何使用,不多说解释,直接说代码使用方式

前篇 + 详解Vue多环境配置 ↓

详细-环境变量环境变量的默认值和自己添加环境变量在main.js打印console.log(process.env);会得到两个默认变量分别是BASE_URL:"" 和 NODE_ENV:"development",NODE_ENV:""可以用来区分环境是开发还是测试还是正式环境如下图1 .如果想要自己定义添加环境变量需要,在根目录下新建.env文件以VUE_APP开头,例如:VUE_APP_MY_NAME="活在风浪",注意需要重新启动服务!1......https://blog.csdn.net/m0_57904695/article/details/122269218?spm=1001.2014.3001.5502

目录

webpack环境变量 

第一 配置package.json

第二 配置介绍 （简单说明 看详情请点击上面tps）

第三 在根目录新建文件

vite 环境变量

1:新建.env文件 

2：vite 跨域配置

3：配置npm

---

 

 

webpack环境变量 

第一 配置package.json

package.json 里的 scripts 配置 serve test build，通过 --mode xxx 来执行不同环境

通过 npm run serve 启动本地 , 执行 development
通过 npm run test 打包测试 , 执行 testing
通过 npm run build 打包正式 , 执行 production

"scripts": {
  "serve": "vue-cli-service serve --open",
  "test": "vue-cli-service build --mode testing",
  "build": "vue-cli-service build",
}

第二 配置介绍 （简单说明 看详情请点击上面tps）

 以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。

 比如,VUE_APP_MY_NAME = '活在风浪' 通过process.env.VUE_APP_MY_NAME 访问。
 除了 VUE_APP_xxx 变量之外，在你的应用代码中始终存在两个默认变量NODE_ENV 和BASE_URL

第三 在根目录新建文件

• .env.development 本地开发环境配置
• 内容如下

NODE_ENV='development'

• .env.test 测试环境配置

NODE_ENV='test'

• .env.production 正式环境配置

 NODE_ENV='production'

第四 文件已建立完毕,下一步该封装baseURL了,如果你封装了axios,在你的axios父文件夹中在新建一个baseURL.js里面写的是判断环境的代码

let baseURL = "";
if (process.env.NODE_ENV == "development") {
    // 开发环境  因为我这里写了配置跨域的重定路径所以是api
    baseURL = "/api";

} else if (process.env.NODE_ENV == "production") {
    // 正式环境
    baseURL = "https://www.baidu.com";
} else {
    // 测试环境
    baseURL = "https://www.ceshi.com";
}
export default baseURL;

 

 第五 导出baseURL  在封装axsio的地方导入baseURL 将公共地址换成 baseURL变量 (baseURL变量就是写的环境判断)

 

 

使用不同的命令 请求的网址就不一样 如

//启动本地服务器
npm run serve

//启动打包命令
npm run build

//启动测试环境命令
npm run test

 

说一个细节:如果运行打包命令,dist中index.html直接打开是相对电脑盘符的

要使用一个插件 直接在vsc插件管理下载

vite 环境变量

1:新建.env文件 

 .env.development

NODE_ENV='development'

.env.production

 NODE_ENV='production'

.env.test

NODE_ENV='test'

---

以上为了区分环境

---

 

2：vite 跨域配置

 跨域这里只需要写本地接口就行，线上和test环境已经在network/baseUrl.js中配置好了 

 // 跨域
  server: {
    //使用IP能访问
    host: "0.0.0.0",
    // 热更新
    hmr: true,
    //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    strictPort: false,
    //自定义代理规则
    proxy: {
      // 选项写法
      "/api": {
        // 跨域这里只需要写本地接口就行，线上和test环境已经在network/baseUrl.js中配置好了
        target: "http://192.168.0.52:8083",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },

 main.ts打印环境看下

// 打印环境变量
 console.log("😂👨🏾‍❤️‍👨🏼==>：1 环境 ", process.env.NODE_ENV);
 console.log("😂👨🏾‍❤️‍👨🏼==>：2 环境网址", import.meta.env.VITE_API_URL);

---

以上为了本地跨域的解决 和 切换环境配置对应接口地址

---

3：配置npm

 

  "scripts": {
    "dev": "vite --open",
    "test": "vite --mode test",
    "build": "vite build",
    "build:test": "vite build --mode test",
    "preview": "vite preview --open"
  },

结语：祝大家2022越来越强