vue项目打包并部署到服务器

前端学习 专栏收录该内容
15 篇文章 0 订阅

vue项目打包

静态资源放到static文件夹

包括js、css、image,都放到static文件夹中

修改路径配置

config---index.js,找到assetsPublicPath:'/';加个点:'./'
在这里插入图片描述
在这里插入图片描述
如果有设置背景图片,需要重定向一下路径,将背景图片修改为static平级;build/utils.js 在50行,fallback下面设置背景图片地址:publicPath:'../../';
在这里插入图片描述

运行npm run build

运行npm run build会生成dist文件夹,dist文件夹中有static文件夹和index.html,直接打开index.html即可访问项目

vue打包注意事项

前端开发时做的代理跨域处理只是方便于前端开发,项目打包上线时要让后端解决跨域,java后台解决跨域的方法参考下文:https://www.cnblogs.com/ouyanxia/p/8462997.html

部署到服务器

宝塔面板 : 网站-----添加站点

在这里插入图片描述

添加站点

写域名(没有域名写ip)
在这里插入图片描述

上传vue项目

点击网站----根目录进入根目录,上传被压缩成zip格式的打包后的vue项目,并解压,将解压后的文件夹中的dist文件夹复制到根目录下
在这里插入图片描述
此时即可通过ip地址访问dist文件夹

  • 0
    点赞
  • 0
    评论
  • 10
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值