美文网首页
vue3配置文件获取

vue3配置文件获取

作者: 程序猿的小生活 | 来源:发表于2023-08-09 08:53 被阅读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
    

    相关文章

      网友评论

          本文标题:vue3配置文件获取

          本文链接:https://www.haomeiwen.com/subject/efvopdtx.html