vue项目打包部署注意点 + 宝塔面板几步部署项目

2024-04-28 15:10:00

1.vue项目打包

1.1 终端运行打包命令

在编辑器的终端运行vue项目打包命令

yarn run build

打包成功如下：

这时我们可以看到项目目录多出来一个dist文件夹，记住它，后面部署就靠它了。

1.2 修改配置

就我个人部署经历(宝塔面板快速部署)来说，这个配置是一定要修改的，如果不修改配置，直接将build后的dist包部署，运行后页面是空白的。

修改配置要分两个处理方式（vue-cli2和vue-cli3），这里只说 vue-cli3，至于vue-cli2 可在最后的参考博文里找到配置的方法。

因为vue-cli3简洁了许多，没有了配置文件，所以需要自己创建，只能在项目的根目录下创建，并且文件的名字只能是vue.config.js，然后在这个文件里面加上下面的代码即可

module.exports = {assetsDir: 'static',parallel: false,publicPath: './',
}

接着，把路由模式改成“hash”模式，不然页面还是会有部分空白，如果要用历史模式的话，本地是不行的，必须要服务器配合，可在最后的参考博文里找到配置的方法。

至此配置修改完成！

2.宝塔面板部署项目

2.1 部署要求

有一台云服务器（笔者这里用的是腾讯云）
服务器安装宝塔面板 安装教程

2.2 在腾讯云开发端口

登录腾讯云，选择控制台，打开云服务器面板，选择安全组栏

根据自己的安全组，通过添加规则开放一个端口给自己的项目,示例如下：

注意，入站规则和出站规则都要开放这个相同的端口。

2.3 在宝塔上搭建个人网站

①、登录宝塔，在【网站】下选择【添加站点】；
注：在域名里填写两行，第一行随便起一个域名，第二行填写IP:端口号。(IP为你的服务器的公网地址，端口号必须与你刚刚开放的端口号一致)

②、点击刚刚新建的域名，可以看见【域名管理】下有两行，删除域名，只留IP；

③、点击【文件】，在域名目录下（例如刚刚的www.3434.com）上传第一步打包的dist文件夹。

④、点击【网站】，点击刚刚新建的域名，选择【默认文档】，添加dist，一般网页默认index.html为首页，这里在【默认文档】里修改主页为dist，如下：

至此，宝塔面板部署项目成功！

3.在浏览器打开项目

现在只需要在浏览器地址栏输入 IP:端口号，(IP为你的服务器的公网地址，端口号必须与你开放的端口号一致)，即可看到自己的项目，项目部署成功！

4.参考资料

Vue项目打包后,部署在服务器,访问页面出现空白一片

在宝塔上利用一个IP搭建多个个人网站

宝塔–同一IP下架设多个网站

vue项目打包部署注意点 + 宝塔面板几步部署项目相关推荐

最新版宝塔面板 | Windows安装以及项目部署教程
最新版宝塔面板 | Windows安装以及项目部署教程,最初布署网站环境,是apache.PHP.数据库等必须安装的费事,后来也使用过XAMPP.phpstudy等一键搭建工具,挺方便的但是接触了宝塔 ...
【腾讯云服务器】部署云服务器(宝塔面板)——Flask项目+mysql+html全过程
文章简介本文章是记录我将自己的一个小web项目[(html+css+js)+Flask+Mysql]部署到腾讯的云服务器(宝塔腾讯云专属面板)上的过程,希望能帮到大家. (自己写的圣诞树和一个发送弹 ...
宝塔面板配置及部署javaweb教程（全网最全）
配置宝塔面板javaweb运行环境详解,若出现404nignx错误也可按此教程进行检查 1.准备:(解析成功的域名,本地运行完好的项目,宝塔面板) 解析按照阿里的教程一步一步来,不会出错,非常简单,有 ...
宝塔面板搭载ThinkPHP5.0项目关于open_basedir报错解决办法
今天折腾了一下把服务器重装系统,然后安装宝塔面板玩玩,在服务器运营商配置好安全组后,一键搭建LAMP环境还算顺利,确实比较方便.把tp5的项目放上去一运行gg了,上来就报了三个错: 搜了半天怎么解决o ...
阿里云轻量服务器利用宝塔面板为域名部署SSL证书
除了在Let's Encrypt网站制作服务器SSL证书以外,阿里云上申请SSL证书的步骤更加的简单.以下先给出前者的教程博客,感兴趣的可以移步观看申请Let's Encrypt永久免费SSL证书_ ...
【宝塔面板建站】10分钟windows宝塔面板手动通用部署站点shopxo在线商城，无需服务器和域名本地运行（保姆级图文）
目录手动安装,通用方法可以用来安装所有类似的网站 1. 下载shopxo商城源码 2. 添加站点并创建数据库 3. 把第一步下载的网站源码放入我们新建的站点修改本地host 访问域名,启动网站的安 ...
jekenis父子结构项目打包_全栈之DevOps系列 - 发布 Python 项目开源/私有包
DevOps目前并没有权威的定义,普遍认为,DevOps 强调的是高效组织团队之间如何通过自动化的工具协作和沟通来完成软件的生命周期管理,从而更快.更频繁地交付更稳定的软件. 作者以 dukepy 系 ...
宝塔面板几步优化设置提升云服务器性能
服务器运行环境的优化可分为三个方面:mysql方面,PHP方面,内存方面这三个不同的方面进行优化, 性能调整. 这里大家可以根据自己服务器配置进行设置,其实设置并发多少,大家可以根据自己服务器内存 ...
[转]Docker部署Django由浅入深系列(下): 八步部署Django+Uwsgi+Nginx+MySQL+Redis
在上篇教程中,我们手动构建了两个容器,一个容器放Django + Uwsgi,另一个容器放Nginx,成功部署了一个简单的Django项目.然而在实际的生产环境中,我们往往需要定义数量庞大的 dock ...

最新文章

热门文章