当前位置: 首页 > Web前端 > vue.js

Vue3+ts+vite问题总结——环境变量(三)

时间:2023-03-31 21:49:37 vue.js

环境变量配置第一步:安装cross-envyarnaddcross-env-D第二步:在根目录下创建.env、.env.test和.env.prod,并写入相应的代码#项目本地运行端口号VITE_PORT=8848#开发环境读取配置文件路径VITE_PUBLIC_PATH=/#开发环境代理VITE_PROXY_DOMAIN=/api#开发环境路由历史模式(Hash模式:`hash`,HTML5模式:`h5`,Hashmodewithbaseparameter:"hash,baseparameter",HTML5modewithbaseparameter:"h5,baseparameter")VITE_ROUTER_HISTORY="hash"#开发环境后端地址VITE_PROXY_DOMAIN_REAL="http://127.0.0.1:3000"第三步:配置package.json运行脚本//第一种在这里写环境"scripts":{+"dev":"cross-env--max_old_space_size=4096vite--modedev",+"build":"cross-envvue-tsc--noEmit&&vitebuild--modedev",....}//执行命令npmrundev第二种:也可以修改npmrundev--modeproduction直接在命令行Step4:在组件.meta.VITE_PORT中使用importStep5:在vite.config.ts中使用import{defineConfig,loadEnv,UserConfig}from'vite';...exportdefaultdefineConfig(({mode}:UserConfig):UserConfig=>{constenv=loadEnv(mode,__dirname);返回{server:{host:'127.0.0.1',//解决"viteuse`--host`toexpose"port:Number(env.VITE_PORT),...