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

时间:2024-05-19 08:32:10

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

vue部署到服务器

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

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

带项目名的vue项目部署

我们很多时候都不会只部署一个项目,这时候就需要在一台服务器部署多个。
1.vue.config.js 文件 修改 baseUrl=‘/’ 修改自己想要的项目名
vue项目nginx部署,以及带项目名的部署
2.修改router下index.js文件 mode 为history时 添加base =“” 访问路径 vue项目nginx部署,以及带项目名的部署
3.打包完成后上传到服务器,不用默认的dist文件 新建一个 访问路径名的文件,打包后的所有文件复制到下面,
4.配置nginx服务器,打开conf目录下,nginx.conf文件
添加一个location
location ^~ /pc {
try_files $uri $uri/ /pc/index.html;
}
5.重启服务器
vue项目nginx部署,以及带项目名的部署

大功告成