Vue2.0 项目实战篇\部署篇

news2024/9/22 21:15:04

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 },