勿忘初心做自己 发表于 2024-6-28 20:12:26

Vite打包Vue3项目,利用宝塔摆设到服务器

一、Vite打包设置、打包

按照如图的设置,将vite.config.js的 base 改为  /dist/
然后npm run build
就会得到左边的这个dist文件夹,这就是打包好的文件
https://img-blog.csdnimg.cn/direct/346af9d2abb546c7818d837a52b7df6a.png

二、创建项目

创建项目以及项目设置
我在服务器安装的php是5.6版本的,其他版本可以自己试一下
https://img-blog.csdnimg.cn/direct/6d4bfd7b6416496e9b723f99c0eb9e99.png
https://img-blog.csdnimg.cn/direct/a8eff0d99a49493986d78ed4f04b86c4.png
https://img-blog.csdnimg.cn/direct/f54e18e9b5e049b482a94d439d2dd645.png
办理刷新404题目
https://img-blog.csdnimg.cn/direct/76173b3d13644cf98bfa8b2a34b2fd8d.png
    location / {
      # root定义网站根目录   html   即网页所在目录
      root   /www/wwwroot/test.com/dist;
      # index定义网站的首页   html/index.html
      indexindex.html index.htm;
      # 避免f5刷新后404
      try_files$uri$uri//index.html;
    }
三、上传文件到服务器

https://img-blog.csdnimg.cn/direct/cc250a5d7c584f17aea88fc3bdd429e0.png
https://img-blog.csdnimg.cn/direct/01de8ab028ff475c9e5c9be40a12c066.png
上传乐成之后,文件目次布局是如许的
https://img-blog.csdnimg.cn/direct/7ec3bcde51be46fc957f12c4e771a90f.png

四、测试运行

https://img-blog.csdnimg.cn/direct/8f2fe00539094768b87376ab27cd2f9f.png
(顺序不肯定要按照我写的顺序从上往下举行,反正最终的各种设置对得上就行)








免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: Vite打包Vue3项目,利用宝塔摆设到服务器