如何将前端项目打包到容器 前端项目打包上线流程

前端项目优化及上线

根据自己项目实际，进行webpack配置，这里只是一个参考，关于上线很多功能作为了解。

优化问题

项目优化策略步骤及详解安装配置

1.生成打包报告=>为了直观发现项目中的问题，共有两种方式
2.第三方库启用CDN => 通过externals加载外部CDN资源
3.Elemet-ui组件按需加载 =>通过cdn的形式优化Element-ui的打包
4.路由懒加载
    1.安装@babel/plugin-syntax-dynamic-import包
    2.在babel.config.js配置文件中声明该插件
    3.将路由改为按需加载的形式，
5.首页内容定制

1.增加加载进度条

安装nprogress包
1.在请求拦截中使用nprogress.start（）
2.在响应拦截中使用nprogress.done()

2.在bulid阶段中使用transform-remove-console移除所有的console

安装babel-plugin-transfrom-remove-console
1.在babel.config.js配置文件中添加plugins“transform-remove-console”
//按需在生产环境下需要使用到的插件，但是开发环境下不需要使用，可以定义个数组，判断在生产环境将插件导入到数组中，将生产环境下数组展开到babel.config.js配置文件中，具体例子如下：

// 解决只在发布阶段需要用到的babel插件
const prodPlugins = []

if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
    ],
    // 发布产品时候的插件数组
    ...prodPlugins,
  ],
}

3.通过vue.config.js修改webpack的默认配置

开发模式和发布模式，共同一个打包的入口文件（main.js），为了将项目开发和发布过程分离，为两种模式，各自指定打包的入口文件，即为：
1.开发模式的入口文件为：src/main-dev.js
2.生产模式的入口文件为：src/main-prod.js

configureWebpack和chainWebpack

在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来定义webpack的打包配置

这里，configureWebpack或chainWebpack的作用相同，位移区别就是他们修改webpack配置的方式不同：
1.chainWebpack通过链式编程的形式，来修改默认的webpack配置
2.configureWebpack通过操作对象的形式，来修改默认的webpack配置

通过chainWebpack自定义打包入口,新增一个vue.config.js的webpack配置文件

// 通过chainWebpack自定义打包入口
module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  },
}

4.通过externals加载外部CDN资源，这样配置需要资源的时候就会直接在window全局寻找

导入的第三方包，最终会打包到一个文件中，从而导致文件体积过大
//解决问题
	通过webpack的externals，来配置加载外部的CDN资源，凡是声明在externals的第三方包，都不会被打包

//在vue.config.jswebpack配置文件生成环境下生成
config.set('externals', {
        vue: 'Vue',
        axios: 'axios',
        'vue-router': 'Vuerouter',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'Nprogress',
        'vue-quill-editor': 'VueQuikkEditor',
      })

同时需要在public/index.html文件的头部，添加如下的CDN的资源引用

也需要在public/index.html文件的头部，添加如下的CDN的资源引用

<!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
  </head>

5.通过cdn的形式优化Element-ui的打包，这样就会在网络上去加载element-ui的组件

1.在生产入口文件中，注释掉element-ui按需加载的代码，
2.在index，html的头部区域中，通过cdn加载element-ui的js和css样式

6.首页内容定制

不同的打包环境下，首页内容不同，通过插件方式定制
在vue.config.js文件中不同模式下配置args
//生产为ture
config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
//开发为false
 config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })

然后在indextitle标签的中设置
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev- '%>电商后台管理系统</title>

    <% if(htmlWebpackPlugin.options.isProd) { %>
        这里面包裹的是cdn的引入
        <% }%>
这样就可以在开发环境不渲染这里面的cdn，生产环境下就会运行内部的cdn代码

7.路由懒加载

在打包构建项目时，js包会变得非常大，影响页面加载，将不同的路由对应的组件分隔成不同的代码块，然后路由访问时才加载对应的组件，更加高效
解决方案：
1.安装@babel/plugin-syntax-dynamic-import包
2.在babel.config.js配置文件中声明该插件
3.将路由改为按需加载的形式，

安装路由懒加载
npm install --save-dev @babel/plugin-syntax-dynamic-import

//然后在babel.config.js配置文件中导入插件
'@babel/plugin-syntax-dynamic-import',

在routes文件中将路由方式导入成下面的形式，并将之前的组件导入方式注释掉
// import Login from '@/views/login.vue'
const Login = () =>
  import(/* webpackChunkName: "login_home_welcome" */ '@/views/login.vue')
"login_home_welcome"：为每一个分组的名字，同一个名字的会打包到同一文件中

以上项目基本完成，后面开始项目上线！！！！！

项目上线

项目上线相关配置步骤

1.通过node创建web服务器
2.开启gzip配置
3.配置https服务
4.使用pm2管理应用

1.通过node创建web服务器

创建node项目，安装express，通过express创建web服务器，将vue打包生成dist文件夹，托管为静态资源即可

1.在项目文件同目录下创建一个后缀为serve的文件夹
2.使用vscode打开该文件终端，@npm init -y 初始化生成package.json文件
3.@npm i express 安装express
4.将项目原文件夹中dist目录复制到serve文件中

5.在serve在vscode创建一个app.js文件
// 导入express
const express = require('express')
const app = express()

// 将dist文件托管为静态资源
app.use(express.static('./dist'))

// 启动服务器，相应在80端口,指定端口号并启动服务器
app.listen(3001,()=>{
    console.log('serve running ar http://127.0.0.1:3001')
})
//通过node .\app.js测试文件运行，如果打印'serve running ar http://127.0.0.1:3001'表示服务器启动成功
//2.通过http://127.0.0.1在网页上访问就可以该打包的项目了
//3.测试完毕然后使用nodemon .\app.js这样服务器就跑起来了

//注意事项：
//1.一定在打包时，要将基准路由模式改为hash模式，
//2.并且关闭apache服务器，不然浏览器会默认在apache服务器上去找本地地址的文件，
//3.还有在vue.config.js文件的配置externals加载外部CDN资源的config中的英文大小写写对，不然文件找不到包资源
//4.如果修改后重新打包更换serve文件中的dist文件，再次运行node .\app.js即可

解决打包后数据不显示的处理方式

修改各个包资源版本号通过packjson中的版本号赋值给index文件中引入的CDN引入的版本号即可，然后通过上述注意事项中的4步来执行，再来执行即可

2.开启gzip配置

减少文件体积，传输速度更快
通过服务端使用express做gzip压缩，配置如下：
1.安装 @npm i compression -D
2.在app.js中配置及注意事项如下：

// 导入express
const express = require('express')
// 导入gzip压缩包
const compression = require('compression')
const app = express()
// 一定要将compression使用在托管静态资源之前，才会生效
app.use(compression())
// 将dist文件托管为静态资源
app.use(express.static('./dist'))
// 启动服务器，相应在80端口,指定端口号并启动服务器
app.listen(3001,()=>{
    console.log('serve running ar http://127.0.0.1:3001')
})

//再次启动大的资源就会被压缩

3.配置HTTPS服务

1.//声明一点：
在真实开发时，这个配置是后端来配置的，比如java，python，php在部署时开启https，这一步骤作为了解

2.为什么启动https服务

• 传统的http协议传输是明文的，不安全
• 采用https协议对传输的数据进行加密处理，防止数据被中间人窃取，使用更加安全

3.需要申请ssl证书（http://freessl.org）
一般企业使用的是需要钱申请的
1.个人申请进入https://freessl.cn/官网，输入申请的域名并选择品牌
2.输入自己的邮箱并选择相关选项
3.在买的服务器上验证DNS（在域名管理后台添加TXT记录）
4.验证通过，下载ssl证书（full_chai.pem公匙；private.key私钥）

3.后台项目中导入证书

// 导入express
const express = require('express')
// 导入https和文件读取方法fs
const https = require("https")
const fs= require('fs')
// 导入gzip压缩包
const compression = require('compression')
const app = express()
// 创建一个option对象
const options = {
    // 使用文件读取同步的方式
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}
// 一定要将compression使用在托管静态资源之前，才会生效
app.use(compression())
// 将dist文件托管为静态资源
app.use(express.static('./dist'))
// 启动服务器，相应在80端口,指定端口号并启动服务器
// app.listen(3001,()=>{
//     console.log('serve running ar http://127.0.0.1:3001')
// })
// 创建服务器对象,将两个钥匙文件对象作为第一个参数，将创建express对象作为第二个参数，监视https的默认端口443
https.createServer(options,app).listen(443)

4.上线-使用pm2管理应用

1.在服务器上安装pm2：@npm i pm2-g （全局安装该工具）
2.启动项目：pm2 start 脚本--name 自定义名称（脚本：入口文件）
3.查看运行项目：pm2ls
4.重启项目 pm2 restart 自定义名称
5.停止项目 pm2 stop 自定义名称
6.删除项目 pm2 delete 自定义名称

当status为online时，关闭该窗口，这样就不用运行自己运行，后台会自动给我们运行该web

每次重启通过pm2 ls查看name和id重启服务器

不想要这个网站对外发布pm2删除该网站

项目逻辑

1.使用二维码扫码登录

基本逻辑（首先需要两台服务器）
1.浏览器向服务器请求登录二维码，浏览器收到请求，产生随机字符串，
2.服务器将产生的字符串作为key值，存在redis服务器
3.存储成功后，字符串和登录验证接口生成二维码返回给网页
4.当成功后，将二维码包含的字符串作为参数每隔一秒请求一次服务器
5.用户用手机扫码得到字符串，将用户的信息一起发给服务器
6.手机服务器收到请求通过字符串去redis服务器将用户的信息作为value值存入
7.当每隔一秒请求查询到用户信息和密码查出，内部调用登录方法，生成用户token返回给浏览器
8.浏览器获得用户token，登录成功