手把手教你使用宝塔部署Vue项目
1. Vue项目执行打包命令进行打包得到dist文件夹
npm run build
2. 打开宝塔主页进入网站,选择添加站点

3. 将自己的服务器网址作为域名,默认为80端口,可自行设置备注和根目录,点击提交

4. 点击设置->配置文件,加入如下代码(配置跨域问题),点击保存(建议手敲,格式很重要)
location /api {
proxy_pass http://gmall-h5-api.atguigu.cn;
}
5. 点击文件,进入前面设置的地址,将原有文件全部删除

6. 将前面打包的dist文件夹里面的文件拖到宝塔文件中,进行上传


7. 进入nginx文件夹下的conf文件夹,找到nginx.conf文件,双击进入编辑,找到server下的listen,将端口改为前面设置的端口,保存即可(需要部署多个项目时复制多个server进行配置)

8. 输入前面设置的域名即可进入制作的项目中
总结
到此这篇关于使用宝塔部署Vue项目的文章就介绍到这了,更多相关宝塔部署Vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
解决vue3.0运行项目warning Insert `·` prettier/pret
这篇文章主要介绍了解决vue3.0运行项目warning Insert `·` prettier/prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
解决removeEventListener 无法清除监听的问题
这篇文章主要介绍了解决removeEventListener 无法清除监听的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vue-quill-editor富文本编辑器上传视频功能详解
需求需要实现富文本的功能,同时富文本中还可以上传视频和图片,选来选去最后决定了用这个富文本编辑器,下面这篇文章主要给大家介绍了关于vue-quill-editor富文本编辑器上传视频功能的相关资料,需要的朋友可以参考下2023-05-05
vue项目如何从session中获取对象,并且使用里面的属性
这篇文章主要介绍了vue项目如何从session中获取对象,并且使用里面的属性问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12


最新评论