①在终端运行 npm run build在文件夹中会出现一个 dist 文件夹
终端会出现
或者 运行npm run build --report 会在浏览器打开显示包目录的分析图(主要是告诉你那个包体积比较大)
在build下的webpack.prod.conf.js文件中添加一个与module、output 平级的externals: {},// 外部导入包的方式
// 把项目中，一些体积比较大的包，抽离为 外部加载的方式 externals: { // 包名: '构造函数' vue: 'Vue', // vue 'vue-router': 'VueRouter', // 路由 axios: 'axios', lodash: '_', nprogress: 'NProgress', echarts: 'echarts' },
CDN(镜像加速)就是网速特别开的一台服务器
打包时劲量不要使用本地的包要从 https://www.bootcdn.cn/ 网站上找(runtime.min.js之类的包)
比如[下列代码都是放到index.html 中的]:(这样引入相当于按需导入)
<link href=https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css rel=stylesheet> <script src=https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js> </script> <script src=https://cdn.bootcss.com/vue/2.5.16/vue.runtime.min.js> </script> <script src=https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js> </script> <script src=https://cdn.bootcss.com/axios/0.18.0/axios.min.js> </script> <script src=https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js> </script> <script src=https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js> </script>
上述完成后 在把 dist 复制出来 创建一个文件夹把dist 放入 在文件夹中在创建一个 app.js
在这个文件中的终端 输入 npm init -y 会生成一个 package.json文件
在输入 npm i express -S 会生成一个 package-lock.json
在 app.js 文件中 app.use(express.static('./dist') // 托管dist文件
// 导入express 模块
const express = require('express')
// 创建express的服务器实例
const app = express()
// 把 dist 挂载到 app上
app.use(express.static('./dist'))
// 3000是端口号
app.listen(3000,function(){
console.log('Express server running at http://127.0.0.1:3000')
})
在输入 node ./app.js
开启GZip压缩(要在原项目中使用) http://www.expressjs.com.cn/guide/using-middleware.html
首先要 npm install compression
然后
//导入Gzip压缩的中间件
const compression = require('compression')
// 注册中间件，启用Gzip压缩
app.use(compression())
但是压缩后体积还是大 可以为web服务器开启GZip压缩(Apache、IIS、Tomcat、Node服务器)
如果不启用GZip压缩,那么,服务器上文件的真实大小,,就是网络传输中,真实传输的大小
如果不启用GZip压缩,那么,服务器上文件的真实大小,,就是网络传输中,真实传输的大小
如果服务器,启用GZip压缩,则 文件在网络中,传输的时候,会被压缩,经过Gzip的压缩之后,文件体积会大约减小到之前的四分之一
如果项目需要在减小体积 把element-ui按需导入(用到那个导入那个组件) 让后在逐一挂载到vue实例上就可以了[要在原目录中]
按需导入后记得要把 Vue.use(elementUI) 这个注释掉
路由的懒加载https://router.vuejs.org/zh/guide/advanced/lazy-loading.html (要在原项目中)
使用路由懒加载 需要 先
npm install --save-dev @babel/plugin-syntax-dynamic-import
安装好后需要在 .babelrc文件中的plugins对象中添加 "@babel/plugin-syntax-dynamic-import"
/* webpackChunkName: "group-foo" */ 不要删除
// 组件名 组名 导入的组件
const login = () => import(/* webpackChunkName: "login_home" */ '@/components/home')
// 组名不同就不会打包成一组
发布到服务器 在目录中创建一个cert文件夹
首先要导入证书 .pem 和 .key 格式的
在在app.js中 导入包
// 导入 express 模块
const express = require('express')
const http = require('http')
const https = require('https')
const fs = require('fs')
// 创建 express 的服务器实例
const app = express()
//导入Gzip压缩的中间件
const compression = require('compression')
// https 证书相关的文件配置
const options = {
key: fs.readFileSync('./cert/private.key'),
cert: fs.readFileSync('./cert/full_chain.pem')
}
// 启用 服务器的 代理模式
app.enable('trust proxy')
app.use('*', (req, res, next) => {
// 如果请求的协议，是 https 的协议，直接放行
if (req.secure) {
return next()
}
// 如果请求的不是https的协议，则重定向
res.redirect(`https://${req.hostname}${req.url}`)
})
// 注册中间件，启用Gzip压缩
app.use(compression())
app.use(express.static('./dist'))
// 调用 app.listen 方法，指定端口号并启动web服务器
// app.listen(80, function() {
// console.log('Express server running at http://127.0.0.1:80')
// })
// 启用http服务器
http.createServer(app).listen(80, () => {
console.log('Express server running at http://127.0.0.1:80')
})
// 启用 https 服务器
https.createServer(options, app).listen(443, () => {
console.log('Express server running at https://127.0.0.1:443')
})
pm2 ls 查看服务器运行
pm2 - delete -文件名称
cd 指定目录
pm2 start./ app.js--name 自定义名称