美文网首页
Vue项目history模式下nginx如何配置

Vue项目history模式下nginx如何配置

作者: 你单排吧 | 来源:发表于2021-10-31 20:18 被阅读0次

1、publicPath

首先,可以修改 vue.config.js 中的 publicPath

module.exports = {
  publicPath: '/project'    // 这个project就是项目将要存放的目录,下文看到project自己脑补
}

2、配置nginx

使用以下命令查看nginx所在目录:

whereis nginx

然后根据查看到的目录,假设为 /usr/local/nginx,那么就可以执行:

vi /usr/local/nginx/conf/nginx.conf

location / 同级处添加:

location /project {
        alias   /usr/local/nginx/html/project;   #此处为存放整个网站所有项目的路径拼接上当前项目所在目录
        index  index.html;   
        try_files $uri $uri/ /project/index.html;  #解决刷新出现404问题
}

然后重启nginx

# 假设你的nginx放在以下路径:
cd /usr/local/nginx/sbin
./nginx -s reload

相关文章

网友评论

      本文标题:Vue项目history模式下nginx如何配置

      本文链接:https://www.haomeiwen.com/subject/hdlqoltx.html