腾讯云服务器+宝塔Linux面板部署vue3+vite打包项目

1、vue3+vite+ts项目打包

1、使用自己的命令，打开pakeage.json找到这一行看看自己前面的是什么,我的是build然后npm run build

2、生成dist文件，我的vite.config.ts暂未做过多的配置，具体问题具体分析

有dist文件就是打包成功，接下来就是购买服务器

2、购买服务器和部署

1、免费3个月的阿里云服务器或者1个月的腾讯云服务器，腾讯云白嫖我的地址是这个云产品免费体验馆_云产品免费试用_个人云产品试用-腾讯云

2、买了之后就处理一些简单的操作之后就下载xshell

可以使用百度网盘下载百度网盘 请输入提取码。提取码:7nwy

3、通过xshell连接云服务器，建议先去重置一下服务器的密码

4、然后再去新建xshell

5、会弹出让你输入用户名，一般默认为root，除非你设置了

6、输入重置的服务器密码

7、连接成功最后是这样的字段

8、在xshell里安装宝塔

输入

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

2、然后按y回车

3、显示用户名、密码即表示安装成功

4、然后使用外网面板地址，登录宝塔

如果已经安装了命令链接了服务器就直接运行 /etc/init.d/bt , 输入对应的编号即可

5、输入对应账号密码登录宝塔面板

6、之后进入宝塔页面会让你安装依赖可以装、可以不装视情况而定

7、如果要你密钥啥的你就去服务器密钥那你创建一个对应名字丢进去就行了

8、点击文件在、在文件里找到这个文件，我的位置是这里，找不到就右上角搜索，进入编辑

然后如下修改

nginx vue项目上线后刷新页面丢失

history 模式下，会出现一个致命的BUG，在服务器上面上线之后，点击页面跳转没有问题，但是一旦点击刷新页面会出现404错误,原因是history模式下刷新界面，就等同于向服务器直接请求

解决：

在ngnix中的server总加入一句话

location / {
      try_files $uri $uri/ /index.html;
}

修改的代码

server{
    listen 9080;
    server_name 152.136.43.10;
    index index.html index.htm index.php;
    root  /usr/local/nginx/html/dist;
    
    #error_page   404   /404.html;
    include enable-php.conf;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

9、配置好之后就来这里开放端口

然后使用公网ip地址+端口号即可成功打开vue项目

要部署node+express+mysql查看下面地址：

宝塔部署node+express+mysql_Tenderྉ458的博客-CSDN博客