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

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
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容