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

转载

mob64ca13fa2f9e 2024-05-12 11:42:05

文章标签 如何将前端项目打包到容器前端服务器加载配置文件 文章分类 云原生云计算

前端项目优化及上线

根据自己项目实际，进行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，登录成功

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：grep和sort结合使用 grep -lrt

下一篇：springboot 如何防御LDAP注入 spring如何防止sql注入

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

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

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

前端项目优化及上线

优化问题

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

1.增加加载进度条

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

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

configureWebpack和chainWebpack

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

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

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

6.首页内容定制

7.路由懒加载

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

项目上线

项目上线相关配置步骤

1.通过node创建web服务器

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

2.开启gzip配置

3.配置HTTPS服务

2.为什么启动https服务

3.后台项目中导入证书

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

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

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

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

项目逻辑

1.使用二维码扫码登录

51CTO博客

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

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