关于前端打包加部署

1.首先输入命令

```
npm build
```

2.打包完成进入xshell,输入命令

```
tar -zcvf "da 20240315 登录.tar.gz" *
```

这个命令是在Linux或类Unix系统上使用的tar命令,用于创建一个名为 "da 20240315 登录.tar.gz" 的归档文件,其中包含当前目录下的所有文件和子目录。

”.tar.gz“是压缩包后缀,“da 20240315 登录”是包名,

3.接着输入命令

```
mv da\ 20240315\ 登录.tar.gz ../历史版本/
```

这个命令是在Linux或类Unix系统上使用的mv命令,用于将名为 "da 20240315 登录.tar.gz" 的文件移动到 "../历史版本/" 目录中。

4.然后直接将dist包的内容全部复制替换当前dist包

感谢你看到最后,最后再说两点~
  ①如果你持有不同的看法,欢迎你在文章下方进行留言、评论。
  ②如果对你有帮助,或者你认可的话,欢迎给个小点赞,支持一下~

感兴趣的可以关注公众号一起学习,我会不定期发布学习和一些有意思的见闻。

### 苍穹外卖前端项目打包部署 #### 1. 准备工作 为了成功打包部署苍穹外卖前端项目,需先确保本地开发环境中已正确安装必要的工具和服务。对于macOS用户来说,这包括但不限于Node.js、npm/yarn以及通过Homebrew安装的Nginx服务[^3]。 #### 2. 构建生产版本 在执行实际部署前,应该构建一个优化过的生产环境下的应用版本。通常情况下,在基于Vue或React的应用程序中,可以通过运行如下命令来创建这样的构建: ```bash # 对于 Vue CLI 创建的应用 npm run build # 或者如果你使用的是 Yarn yarn build ``` 此过程会生成一组静态资源文件(HTML, CSS 和 JavaScript),这些就是准备上传至服务器的内容[^1]。 #### 3. 将构建成果放置到Web服务器上 假设已经按照之前提到的方法完成了Nginx的服务端设置,则下一步便是把`dist/`目录下由上述构建指令产生的所有文件复制到指定位置——即Nginx所指向的那个用于存放网站静态资产的位置。具体路径取决于个人配置情况;一般而言,默认会在`/usr/local/nginx/html`找到这个目录。 #### 4. 更新 Nginx 配置以支持前端路由模式 (可选) 如果应用程序采用了单页应用(SPA)架构,并且依赖浏览器历史记录API实现页面导航功能的话,那么可能还需要调整Nginx配置以便能够正确处理来自客户端发出的各种请求。可以考虑向站点配置添类似下面所示的一段规则: ```nginx location / { try_files $uri $uri/ /index.html; } ``` 这段配置的作用在于当遇到未匹配上的URL时自动返回入口html文档而不是显示404错误页面,从而允许前端框架接管后续的路由解析逻辑。 #### 5. 测试部署效果 最后一步自然是验证一切是否正常运作了。重启Nginx使新的配置生效之后,打开浏览器访问对应的域名地址即可查看最终呈现出来的网页界面。如果有任何异常发生也不要慌张,仔细检查日志信息往往能帮助快速定位问题所在[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月夜奇术师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值