vue3配置文件获取

2023-08-09  本文已影响0人  程序猿的小生活

1.在项目根目录下建立两个文件,文件名为:
(1).env.production 生产环境

//注意变量名必须以VITE开头
VITE_APP_ENV="production"
VITE_BASIC_URL_KEY=192.168.1.1

.env.development 开发环境

//注意变量名必须以VITE开头
VITE_APP_ENV="development"
VITE_BASIC_URL_KEY=192.168.1.1

2.在vite.config.js文件获取

import { fileURLToPath, URL } from 'node:url'
import { defineConfig,loadEnv} from 'vite'
import {getCurrentInstance} from "vue";
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ command, mode, ssrBuild }) =>{
//获取.env.production   .env.development文件变量
let ev =loadEnv(mode, process.cwd()).VITE_BASIC_URL_KEY;
mode:自动加载当前为生产环境还是开发环境
  console.log(ev)
  return {

    plugins: [
      vue(),
    ],
    define: {//vue3必须要使用这个获取process
      'process.env': {}
    }

    ,
    base:loadEnv(mode, process.cwd()).VITE_APP_ENV=== 'development' ? './' : './',

    /*    server:{
      host:'0.0.0.0'//配置后可以在控制台展示ip地址
    }*/

    server: {//配置代理
      host: '0.0.0.0',
      proxy: {
        "/api": {
          target: ev,//服务器地址
          changeOrigin: true,//允许同源策略
          rewrite: (path) => path.replace(/^\/api/, "")
        }
      }


    }
    ,
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))//配置别名,配置后/src可以用@代替使用
      }
    }
  }
})

3.在script中调用

import.meta.env.VITE_APP_ENV
上一篇 下一篇

猜你喜欢

热点阅读