大家好我是慕容铁柱（扶了扶并不存在的金丝眼镜），今天咱们来聊聊这个让无数萌新开发者夜不能寐的哲学三连问：uniapp怎么打包？怎么上传服务器？怎么突然白屏了？？？

（战术喝水）别慌！本着一贯"授人以鱼不如授之以渔"的原则（其实就是想显摆我的运维经验），咱们用做菜的逻辑来拆解这个技术活——想象你要开家米其林餐厅（虽然目前可能只是煎饼摊水平），现在得先把厨房设备搬进店面对吧？

Step1. 备菜阶段：HBuilderX的正确打开姿势

在菜单栏找到【发行】-【网站-PC Web或手机H5】，这就像把食材洗净切配好。重点来了！manifest.json里的"基础配置"必须检查三遍——这里藏着两个惊天大坑：

1）路由模式建议选history（别问为什么），否则你会收获一堆404大礼包

2）运行的基础路径如果是二级目录记得填"/子目录名/"，不然你的js/css文件会像迷路的小鹿到处乱窜

举个栗子🌰：假设你的项目用了vue-router写了个电商页面

// vue.config.js

module.exports = {

publicPath: process.env.NODE_ENV === 'production' ? '/mall/' : '/'

}

Step2. 选址装修：服务器的千层套路

打包生成的dist目录就是你的"店铺装修材料"，现在要选个地段好的"商铺"：

- 虚拟主机：相当于租格子铺（便宜但隔音差）

- 云服务器ECS：独栋别墅随便造（推荐新人用CentOS7+宝塔面板）

- 静态托管：直接拎包入住精装房（阿里云OSS/COS真香）

重点案例教学时间！以宝塔面板为例：

1. 新建站点时PHP版本选纯静态（除非你要搞SSR）

2. Nginx配置文件暗藏玄机：

location / {

try_files $uri $uri/ /index.html;

这段咒语能防止刷新页面出现404灵异事件

Step3. 开业大吉：文件上传的十八般武艺

上传dist文件就像往店里搬家具：

- FileZilla拖拽大法（传统艺能）

- 宝塔在线解压（适合小白）

- git自动化部署（大佬专属）

这里有个骚操作：用Jenkins配置自动化流水线后：

pipeline {

agent any

stages {

stage('Deploy') {

steps {

sh 'scp -r dist/* user@server:/www/wwwroot/your_site/'

}

}

}

从此实现咖啡还没喝完代码就上线的魔法

Step4. 消防检查：SSL证书的安全帽

现在不上HTTPS都不好意思跟人打招呼：

1. Let's Encrypt免费证书申请三连击

2. Nginx配置强制跳转https

3. 混合内容警告处理指南

重点排雷区⚠️：

如果你的接口出现跨域报错：

// uni-app请求示例

uni.request({

url: 'https://api.example.com',

header: {'Content-Type': 'application/json'},

success: (res) => console.log(res.data)

})

记得在Nginx加这句：

add_header 'Access-Control-Allow-Origin' '*';

Step5. 开业促销：CDN加速的涡轮增压

给网站套上CDN就像雇了全球快递员：

- 阿里云全站加速DCDN（土豪专享）

- Cloudflare免费套餐（真·白嫖党）

- 七牛云镜像存储（国产良心）

举个真实翻车案例🛑：

某次我把静态资源缓存设置成30天...结果用户看到的还是半个月前的版本！解决方案是给文件名加hash值：

// webpack.config.js

output: {

filename: '[name].[contenthash].js',

最后送大家一张保命符咒大全：

• 页面白屏 → 检查publicPath和路由模式

• 接口报错 → Chrome开发者工具看Network

• CSS乱套 → assets路径是否绝对地址

• 首次加载慢 → webpack分包+图片懒加载

记住朋友们，"纸上得来终觉浅"，赶紧打开电脑实操才是王道！遇到玄学问题不要慌——删node_modules重装依赖包能解决80%的问题（手动狗头）。要是还搞不定...欢迎半夜三点来我公众号留言啊！（溜了溜了）

TAG:uniapp部署到服务器,uniapp 部署,uniapp项目怎么运行,uniapp连接服务器