vue开发，配置环境变量

.env ——全局的，没有设置其他环境变量时，会加载这个文件里的内容，比如所有版本都使用的是同一个接口地址时,就可以写在这一个文件里面就行

.env.development ——开发环境下的配置文件，会覆盖.env这个文件里定义的环境变量

.env.production ——生产环境下的配置文件，会覆盖 .env这个文件里定义的环境变量

执行 npm run dev 会调用 .env.development 里面的变量

执行 npm run build  会调用 .env.production 里面的变量

使用环境变量

const ENV = import.meta.env //引入环境变量
console.log('当前环境 '+ ENV.VITE_BASE_API);

vite.config.js里面使用环境变量

import {defineConfig,loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

export default ({mode})=>{

    const env=loadEnv(mode, process.cwd());   // 获取.env文件里定义的环境变量
    //  console.log(env);   //变量在命令行里打印出来

    return defineConfig({
        // 配置路径别名
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src'),
            },
        },
        plugins: [vue()],
   
        base: env.VITE_APP_BASE_URL,//资源引用路径 使用环境变量
       
        // 配置域名代理
        server: {
            host:"0.0.0.0",//配置局域网ip访问
            proxy: {
                '/myApi': {
                    target: 'http://tp6',
                    changeOrigin: true,
                    ws: true,
                    rewrite: (path) => path.replace(/^\/myApi/, '')
                },
            },
        },
    })
}

上一篇：vue3项目中pinia状态管理器的使用

下一篇：宝塔面板配置webscoket，wss协议