vue项目nginx部署,以及带项目名的部署

vue项目部署,以及带项目访问的部署

  • vue部署到服务器
    • 带项目名的vue项目部署
    • 大功告成

vue部署到服务器

1.进行打包,idea上npm运行build进行打包vue项目nginx部署,以及带项目名的部署_第1张图片
打包完成后项目目录下的dist文件即项目
2.配置nginx服务器,打开conf目录下,nginx.conf文件

vue项目nginx部署,以及带项目名的部署_第2张图片
只需要注意root对应你的dist文件
3.重启服务器

带项目名的vue项目部署

我们很多时候都不会只部署一个项目,这时候就需要在一台服务器部署多个。
1.vue.config.js 文件 修改 baseUrl=‘/’ 修改自己想要的项目名
vue项目nginx部署,以及带项目名的部署_第3张图片
2.修改router下index.js文件 mode 为或者hash/history时 添加base =“” 访问路径
2.1mode模式,hash下路径前会有#,history路径是完整路径不带#但是如果浏览器刷新页面会丢失
vue项目nginx部署,以及带项目名的部署_第4张图片
3.打包完成后上传到服务器,不用默认的dist文件 新建一个 访问路径名的文件,打包后的所有文件复制到下面,
4.配置nginx服务器,打开conf目录下,nginx.conf文件
添加一个location
location ^~ /pc {
try_files $uri $uri/ /pc/index.html;
}
5.重启服务器
在这里插入图片描述

大功告成

你可能感兴趣的:(vue.js,nginx)