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

vue部署到服务器

1.进行打包,idea上npm运行build进行打包在这里插入图片描述
打包完成后项目目录下的dist文件即项目
2.配置nginx服务器,打开conf目录下,nginx.conf文件

在这里插入图片描述
只需要注意root对应你的dist文件
3.重启服务器

带项目名的vue项目部署

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

大功告成

Logo

前往低代码交流专区

更多推荐