Vue2.0 项目实战篇\部署篇
Vue2.0 项目实战篇\部署篇📜
本篇文章学习记录于： bilibili-黑马程序♞ 104-139集 》》🎯目标：冲击前后端全栈🔥，分享一下学过程：
Java.慈祥的博客——个人前端技术栈blog记录：、感谢黑马官方分享的课程，ありがとうございました 🦀🦀🦀
prev上一篇文章： Vue2.0 项目实战篇-学不会算我的、本来想完整跟完一个项目Blog的，结果发现后面的全是业务逻辑；
基本都是代码，CV战士： 而业务逻辑不同的项目场景又都不同，接口又不稳定，所以这里就不继续了；
好在上述Deom 可以学习完整的一套，项目搭建流程，基本架子一键完成！！
既然，项目做完，那么此篇就来将一下：打包部署！！
Vue2.0 项目打包部署：
Vue 2.0 项目的打包部署通常涉及以下几个步骤，以下是大致的部署流程：
-
服务器环境： 选择一个云服务提供商如：阿里云、华为云等)，本人没有就用自己的电脑吧；
-
安装Node.js： 确保服务器上安装了
Node.js，Vue项目运行需要Node环境； -
安装Nginx： Nginx是一个高性能的HTTP和反向代理服务器
关于，Nginx是可选项，Nginx是非常强大的代理服务器，可以配置多前端包路径代理，
但，对于简单的Vue还有前端小白，并不适合，后期有时间出了一个，Nginx笔记吧，忘记了催我吧~
Vue项目打包：
上述，是企业大部分的打包流程： 在本地开发环境中，其实无需注意这么多，咱只是测试学习；
说明： vue脚手架只是开发过程中，协助开发的工具，当真正开发完了，脚手架不参与上线，打包源代码\部署
-
环境变量替换： 根据环境变量如：
process.env.NODE_ENV自动调整代码，确保生产环境下的性能和安全性； -
资源合并与压缩： 将项目中的各种资源如：
JavaScript、CSS、图片等)，合并成压缩文件，提升页面加载速度； -
语法降级、less解析： 将
ES6+等现代JavaScript语法转换为旧版本的JavaScript、将Less代码转换标准CSS代码过程；
Vue 打包命令配置： 打包后，可以生成，浏览器能够直接运行的网页 => 就是需要上线的源码！
#vue脚手架工具已经提供了打包命令，直接使用即可
yarn build #在项目的根目录会自动创建一个文件夹dist, dist中的文件就是打包后的文件，只需要放到服务器中即可;
配置： 默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath 配成相对路径；
vue.config.JS： publicPath: './' 设置项目内，相对路径打包、则需要将包放在：服务器根目录运行；
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({publicPath: './',//关闭Eslint校验;lintOnSave: false,transpileDependencies: true
})
打包后的，dist直接就可以运行；🎉🎉
打包优化：路由懒加载：
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载： 官方：路由懒加载
如果我们能把不同路由对应的组件分割成不同 的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了；
/** src\router\index.js */
//将组件导入形式,修改为:
const 组件名1 = () => import('@/views/组件名1');
const 组件名2 = () => import('@/views/组件名2');//路由中应用
{ path: '/xxx', component: 组件名1 },
{ path: '/xxxxxx', component: 组件名2 },