vue3,第一次切换环境成功，后续一直失败

原创已于 2025-03-18 09:33:26 修改

· 163 阅读

0 ·

版权

文章标签：

#javascript #前端 #vue.js

于 2025-03-18 09:28:00 首次发布

解决方法：检查代码无错误，发现.env.prod文件放在src文件夹中，移到web文件夹中，成功。

a. 先来看代码改动：

1.main.js 尾端加入：

axios.defaults.baseURL = process.env.VUE_APP_SERVER;
console.log(' 环境：',process.env.NODE_ENV);
console.log('服务端：',process.env.VUE_APP_SERVER);

2.修改login.vue代码，删除的部分作为dev文件里的域名

 const sendCode = () => {
//里面的https://localhost:8000删掉
     axios.post("/member/member/send-code",{ 
       mobile: loginForm.mobile
     }).then(response => {
        let data = response.data;
        if (data.success){
          notification.success({description:'发送验证码成功'});
          loginForm.code = "8888";
        }else {
          notification.error({description: data.message});
        }
     });
    };

    const login = () => {
//里面的https://localhost:8000删掉
      axios.post("/member/member/login",loginForm).then((response) =>{      
        let data = response.data;
        if (data.success){
          notification.success({description:'登录成功'});
          //登录成功，跳转到控制台主页
          router.push("/")
        }else {
          notification.error({description: data.message});
        }
      })
    };

3. 创建两个文件：.env.dev .env.prod

//.env.dev  除 域名对应，NODE_ENV，VUE_APP部分为固定写法 之外，其他随意更改
NODE_ENV=development
VUE_APP_SERVER=http://localhost:8000

//.env.prod
NODE_ENV=production
VUE_APP_SERVER=http://train.imooc.com

4.修改package.json

//package.json 修改部分为
// 加入 --mode dev
//复制上行代码添加： "serve-prod": "vue-cli-service serve --mode prod --port 9000",


//最终代码：
{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve-dev": "vue-cli-service serve --mode dev --port 9000",
    "serve-prod": "vue-cli-service serve --mode prod --port 9000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

b. idea中运行切换为prod运行，前端刷新，查看环境和服务端

（进入网址localhost:9000/login,右键选择检查，下面切换为控制台就能看到）

c.成功显示prod地址，但是清空缓存，再次刷新只出现dev地址，prod地址为空

d.检查代码无错误，发现.env.prod文件放在src文件夹中，移到web文件夹中，成功