项目打包部署

项目打包_优化-去掉打印

---

目标

• 上线后想让所有打印失效

分析

1. 如果自己删除, 那开发还得加回来, 注释也一样啊, 麻烦

2. 能否配置环境变量, 让代码自己来判断呢

3. 先在项目 根目录下配置文件(脚手架环境变量)

• 在.env.development (开发环境变量)

NODE_ENV 变量名随便起, 值不用加引号就是字符串了

NODE_ENV=development

• 在.env.production (生产上线环境变量)

NODE_ENV=production

4. 在main.js里加入如下配置

if (process.env.NODE_ENV!=='development') { 
// process是Node环境全部变量, 运行时根据敲击的命令不同, 脚手架会取环境变量给env添加属性和值
    console.log=function () {}
    console.error=function(){}
    console.dir=function(){}
}

小结

1. 我们可以在这2个文件里定义不同的属性和值, 来区分线上和线下环境不同的值

2. 而且可以让代码自适应在不同环境, 自动选择对应值来使用

项目部署-gitee

---

目标

• 部署项目, 得到一个全网可用的url地址

例如: https://lido54ng675xuwork.gitee.io/

步骤

1. gitee注册账号(有了就忽略这步)

2. 新建仓库(空的, ReadME也不要)

3. 把dist推送到这个新的仓库上 (开发是一个仓库, 部署是另外一个了)

4. 启动gitee提供的page服务 (注意路径会自动找index.html文件来访问给用户看)

5. 如果以后代码更新, 要在本地重新打包, 然后重新推到gitee仓库, 还必须更新重启page服务才能生效)

小结

1. 部署项目, 为了得到一个url地址, 可以在公网中, 大家都可以访问你做的项目

项目部署-公司自己服务器

---

目标

• 创建一个web服务(如果后端有java/其他, 就把dist文件夹发给后台吧)

• 把整个web服务器+dist, 部署到公司自己服务器

步骤

先创建一个本地的服务(用nodejs+express+静态资源文件夹)

// 导入 express 模块
constexpress=require('express')
// 创建 express 的服务器实例
constapp=express()
​
// 1. 将 dist 目录托管为静态资源服务器
app.use(express.static('./dist'))
​
// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(3001, function() {
  console.log('Express server running at http://127.0.0.1:3001')
})

1. 在本地访问测试下, 是否可以正确打开vue打包项目页面, ok了再继续下面的

2. 阿里云, 百度云, 腾讯云选择某一家的即可 (尽量赶上过节再去买)

3. 然后购买线上的云服务器 (学生应该什么时候都便宜) 一人打100kb左右计算 (可以预估同时能支持多少人访问) 根据业务选择多大带宽的服务器 (如果就自己玩 越低越好, 越便宜越好)

4. 选择系统可以选择windows / linux(可以按宝塔面板-一键安装软件)

5. 想办法把代码 传到云服务器上 (win: 百度网盘/gitee , linux 有宝塔面板网页一键上传)

6. 线上的云服务器, 开启一个web服务器 (node+express / nginx / apache / 等)

7. 一定要关闭服务器的防火墙(在哪个网站买的, 来到管理页面, 放行端口)

8. 访问ip+端口和路径即可打开线上服务器的这个网站使用了

小结

1. 租一台云服务器 / 公司自己服务器(需要公网ip能访问 - 如果不能还要研究如何得到一个固定的ip)

2. 把web服务部署到服务器上

3. 访问服务器ip:web服务端口/路径, 打开对应页面访问

扩展

1. 只有ip不行, 如何得到一个域名呢?

可以看这个文档: https://help.aliyun.com/product/35473.html?spm=5176.21213303.J_6028563670.7.d5653edanjoH7j&scm=20140722.S_help%40%40%E4%BA%A7%E5%93%81%E9%A1%B5%40%4035473.S_hot.ID_35473-RL_%E5%9F%9F%E5%90%8D-OR_s%2Bhelpmain-V_1-P0_0

2. 寻找和购买域名(付款) https://wanwang.aliyun.com/domain/?spm=a2c4g.11174283.2.2.46f34c07iCNNPy

3. 域名解析到自己的服务器ip地址上

4. 域名需要备案(注意: 第一次可能需要很多天, 所以请在部署项目之前尽早购买)

5. 以后输入域名跟输入ip一样可以访问你服务器项目了

这里暂时没有域名, 无法演示