VUE打包部署

本文详细介绍了手动部署Vue项目的步骤,包括进入项目根目录、安装依赖、清除旧文件、打包新文件、移动并解压文件至指定目录以及重启nginx服务。

cd <VUE项目根目录>
npm install
rm -rf dist/                // 最好是build 之前把原来的 dist 文件夹删掉,不然搞不清楚是不是最新的
npm run build
zip dist/ dist.zip          // 上一步 npm run build 会生成一个 dist 文件夹,用指令打成  zip 包
mv dist.zip /opt/qanda/     // 把这个 dist.zip 包移动到 /opt/qands/ 目录下
unzip dist.zip              // 解压到当前目录
// 因为环境上的 nginx 配置信息你都配好了,接下来的操作就是重启 nginx 服务
ps -ef | grep nginx
kill -9 <nginx-PID>
cd /usr/local/nginx/sbin
./nginx


以上就是手动部署 vue 项目的全过程

### Vue 项目打包部署后白屏的原因分析与解决方案 Vue 项目的白屏问题通常由多种原因引起,以下是常见的几种可能性及其对应的解决办法: #### 1. **路径配置错误** 当 Vue 应用被打包部署到服务器时,如果 `publicPath` 配置不正确,可能会导致静态资源无法正常加载,从而引发白屏现象。 - 如果应用部署在根目录下,则可以在 `vue.config.js` 中设置 `publicPath` 为 `'/'`[^3]。 - 若部署在子目录中(例如 `/my-vue-app/`),则应将 `publicPath` 设置为对应路径,如 `'/my-vue-app/'`。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my-vue-app/' : '/' }; ``` #### 2. **HTML 文件缓存** 浏览器可能对旧版本的 HTML 文件进行了缓存,在某些情况下会忽略新的 JavaScript 或 CSS 资源文件的变化,进而造成白屏。可以通过修改服务端响应头来控制缓存策略[^2]。 对于未使用 Nginx 的场景,可以尝试以下方式: - 修改 HTML 文件名中的哈希值以强制刷新缓存。 - 使用 `<meta>` 标签禁用页面缓存,例如: ```html <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> ``` #### 3. **JavaScript 错误** 运行时 JavaScript 报错也可能导致白屏。这种问题通常是由于依赖库缺失、语法错误或者环境兼容性引起的。建议开启生产模式下的错误提示功能以便定位具体问题所在。 - 可以通过查看浏览器开发者工具中的 Console 和 Network 板块获取更多信息。 - 确保所有第三方插件均已正确安装且版本匹配。 #### 4. **跨域请求失败** 如果前端需要调用后端接口而发生跨域问题,并且未能妥善处理 CORS 头部信息的话,也有可能触发异常而导致界面卡死于初始状态即所谓的“白屏”。因此需确认 API 地址是否可达以及相应的安全机制设定得当与否[^1]。 --- ### 总结代码片段示例 下面提供一段简单的脚本用于调试阶段快速验证是否存在基础性的 JS 执行障碍: ```javascript // main.js or app entry point file window.onerror = function (msg, url, lineNo, columnNo, error) { console.error(`Error Message: ${msg}`); alert('An unexpected error occurred while loading the application.'); }; try { new Vue({ render: h => h(App), }).$mount('#app'); } catch (e) { console.error(e); } ``` 此部分逻辑可以帮助捕获全局范围内的未被捕获异常事件并向终端用户提供友好的反馈消息而不是单纯呈现一片空白区域给用户看到。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值