nginx和vue里面的vue-router产生冲突解决方案

解决方案

2021/3/4 下午

这两天搭建自己的网站时用vue写了前端，并准备部署到服务器的nginx上。用的是腾讯云的centos 8 云服务器。但在部署时遇到了问题，即：访问网站子目录时刷新出现404问题。（注意：我的网站文件是放在nginx的根目录下的）

原因：nginx的路由和vue的虚拟路由(就是vue-router)产生了冲突，本来是想用vue-router进行路由跳转，但nginx以为是nginx自己的路由，然而nginx目录下面不存在这个路由，所以报了404的错误。

怎么解决嘞？ vue-router 的官方文档有讲！
摘自vue-router官方文档
即：在服务器里打开 nginx.conf 文件，
找到

location / {
	
}

在里面添加一句

location / {
	try_files $uri $uri/ /index.html;
}

这样就可以了。（注意：我的网站部署在nginx根目录下，其他情况可能不适用）

以上就是nginx和vue里面的vue-router产生冲突的解决方案，这里记录一下，希望有用！

# nginx
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue