持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
- 构建打包
- console
- 测试打包结果
- 部署
- GitHub Pages
构建打包
- 在发布上线之前，我们需要执行构建打包，将 .less、.vue、.js 等相关资源进行编译打包，转换成浏览器可以直接识别运行的普通 css、js、html。
npm run build
- VueCLI 会把打包结果生成存储到项目的
dist目录中。
console
- console.log 只是用于开发测试使用，发布上线的话没有意义，所以 VueCLI 在打包构建的就是就给你报错不打包了。移除项目中所有的 console
测试打包结果
不能直接双击打开 index.html 运行。
-
将 dist 放到一个 Web 服务器中运行测试，常见的 Web 服务器：
-
Ngxin
-
Apache
-
tomcat
-
Node.js
-
前端安装配置上面的服务器软件麻烦，这里推荐使用 Vue 官方推荐的一个命令行 http 服务工具：serve。
dist目录需要启动一个 HTTP 服务器来访问 (除非你已经将publicPath配置为了一个相对的值)，所以以file://协议直接打开dist/index.html是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器，例如 serve：-
npm install -g serve -
然后在你的项目目录下执行：
serve -s dist -
启动成功，你将看到如下提示
-
- serve 默认占用 5000 端口并启动一个服务
部署
-
买一个服务器
-
安装服务器运行环境
-
阿里云、腾讯云、....
-
买个域名（非必须）
-
第一次买非常便宜，几十块钱，续费非常贵
-
把项目代码推送到你的部署服务端
-
部署
GitHub Pages
GitHub Pages 是 GitHub 提供的一种免费托管静态网站的服务功能。什么是静态网站？它只能处理纯粹的静态文件，例如 html、css、js、图片等资源，它不提供对 Java、PHP、Node.js、Python 等动态服务。
Vue 项目编译之后得到的不就是：纯粹的静态文件吗？
很多知名的技术网站都部署在 GitHub Pages 中：
-
Vue.js 官方文档
-
Angular 官方文档
-
React 官方文档
所以仅适合纯静态资源：技术文档，个人博客...。
致此打包发布完毕
