与普通的Html静态项目一样,先创建Server代码块,指定端口,域名,root文件夹。
server{
listen 80;
server_name www.vuetest.com;
location / {
root C:\vuetes;
index index.php index.html index.htm;
}
}
此时已经可以访问到网站,但是当使用了vue-router时,在浏览器中刷新页面或者使用this.$router.push 跳转路由时会出现404错误。
这是因为vue-router 的路由路径并没有真的对应一个真实资源,在location中使用try_files 与 rewrite 命令可以解决此问题。
server{
listen 80;
server_name www.vuetest.com;
location / {
try_files $uri $uri/ @router;#指向下面的@router
root C:\vuetes;
index index.php index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
}