Vue.js如何在form表单action的URL中传递变量及解决.env变量undefined问题

1. 修正form表单action属性绑定写法 #

你当前在HTML属性里直接使用${url}的模板字符串语法不生效，Vue中需要用属性绑定指令v-bind（简写为:）来拼接动态变量，正确写法如下：

<form :action="`${url}/auth/login_student`" method="POST">
....
</form>

2. 修复process.env.VUE_APP_URL为undefined的问题 #

按优先级排查以下原因：

• .env文件存放位置错误：Vue CLI规定.env文件必须放在项目根目录（和package.json同级的目录），你当前放在当前文件的上两层不符合要求，请将.env文件移动到项目根目录。
• 未重启开发服务：修改.env文件后必须重启本地开发服务（终止当前npm run serve/yarn serve进程后重新执行启动命令），新的环境变量才会被加载。
• 确认项目脚手架类型：如果你使用的是Vite而非Vue CLI创建的项目，环境变量的命名和读取规则不同：
  • 变量前缀需要改为VITE_，即.env里写VITE_APP_URL=http://localhost:5000
  • 读取方式改为import.meta.env.VITE_APP_URL

你可以先在组件的mounted钩子中打印测试环境变量是否正常读取：

export default {
  data() {
    return{
        url: process.env.VUE_APP_URL
    }
  },
  mounted() {
    console.log('环境变量值：', this.url)
  }
}

确认环境变量读取正常后，再验证form的跳转逻辑即可。

内容的提问来源于stack exchange，提问作者Samyak Jain