vue+springboot开发网站配置ngiux优化网址记录

最近公司开发官网,使用的vue开发,默认的mode

是hash模式.地址栏带有#不是很美观.想着改成history模式去除#号.后端需要配置ngiux.记录一下.

1.前端打包vue项目至dist;

npm run build:prod

2.后端用的是idea;clean install打成jar包.

3.把jar包上传值linux服务器自定义的文件夹内并运行jar包.

4.把vue打包的dist文件夹上传至自定义的linux服务器文件夹内.

5.配置nginx.conf

ps:这里的

location / {
        root   /usr/local/nginx/html/dist;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

 root配置的是你vue打包后存放的dist文件夹路径.最后不要有/;

这里的 try_files $uri $uri/ /index.html;这里是防止history模式下刷新页面后404重定向至index.html;

注意:这里可能会出现资源路径不对的情况.前端需要配置:

webpack.base.conf.js里:

module.exports={

        publicPath:'./'

}

 至此完成;