前言
目录
一、打包之前的路由模式
在SPA单页应用中，有两种路由模式：
hash模式 ： #后面是路由路径，特点是前端访问，#后面的变化不会经过服务器
history模式：正常的/访问模式，特点是后端访问，任意地址的变化都会访问服务器
开发到现在，我们一直都在用hash模式，打包我们尝试用history模式
改成history模式非常简单，只需要将路由的mode类型改成history即可
在src/router/index.vue中修改如下代码：
const createRouter = () => new Router({
mode: 'history', // require service support
base: '/hr/', // 配置项目的基础地址
scrollBehavior: () => ({
y: 0 }), // 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部
routes: [...constantRoutes] // 改成只有静态路由
})
二、性能分析和优化
2.1 生成性能分析报告
$ npm run preview -- --report
这个命令会从我们的入口main.js进行依赖分析，分析出最大的包，方便我们进行观察和优化
执行完这个命令，我们会看到如下的页面：
如上图所示，方块越大，说明该文件占用的文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向
2.2 CDN优化步骤一 webpack排除打包
在vue.config.js中添加如下代码：
// 排除 elementUI xlsx 和 vue
externals:
{
'vue': 'Vue',
'element-ui': 'ELEMENT',
'xlsx': 'XLSX'
}
再次运行，我们会发现包的大小已经大幅减小，但是项目已经无法打开了
2.3 CDN优化步骤二 CDN文件配置
在vue.config.js中添加如下代码：
const cdn = {
css: [
// element-ui css
'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // 样式表
],
js: [
// vue must at first!
'https://unpkg.com/vue/dist/vue.js', // vuejs
// element-ui js
'https://unpkg.com/element-ui/lib/index.js', // elementUI
'https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js'
]
}
扩展：可以使用环境变量来让CDN配置只在生产环境中生效，代码如下：
let cdn = {
css: [], js: [] }
// 通过环境变量 来区分是否使用cdn
const isProd = process.env.NODE_ENV === 'production' // 判断是否是生产环境
let externals = {
}
if (isProd) {
// 如果是生产环境 就排除打包 否则不排除
externals = {
// key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字)
'vue': 'Vue', // 后面的名字不能随便起 应该是 js中的全局对象名
'element-ui': 'ELEMENT', // 都是js中全局定义的
'xlsx': 'XLSX' // 都是js中全局定义的
}
cdn = {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // 提前引入elementUI样式
], // 放置css文件目录
js: [
'https://unpkg.com/vue/dist/vue.js', // vuejs
'https://unpkg.com/element-ui/lib/index.js', // element
'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js', // xlsx 相关
'https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js' // xlsx 相关
] // 放置js文件目录
}
}
externals: externals
2.4 CDN优化步骤三 注入CDN文件到模板
首先，在vue.config.js中的chainWebpack配置中添加如下代码：
// 注入cdn变量
// 这行代码 会在执行打包的时候将cdn变量注入到 html模板中
config.plugin('html').tap((args) => {
// args 是注入html模板的一个变量
args[0].cdn = cdn // 后面的cdn就是定义的变量
return args // 需要返回这个参数
})
然后在public/index.html中添加如下代码：
<head>
<!-- 引入样式 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) {
%>
<link rel="stylesheet" href="<%=css%>">
<% } %>
</head>
<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) {
%>
<script src="<%=js%>"></script>
<% } %>
最后，进行打包测试：
$ npm run build:prod
经过测试我们发现，我们的项目的体积变小了，同时可以正常显示了，这样就达到了优化的目的
三、使用koa框架部署项目
3.1 建立web服务文件夹
$ mkdir hrServer
3.2 在该文件夹下，初始化npm
$ npm init -y
3.3 安装服务端框架koa
$ npm i koa koa-static
3.4 拷贝项目打包生成的dist目录到hrServer/public下
3.5 在根目录下创建app.js，添加如下代码：
const Koa = require('koa')
const serve = require('koa-static');
const app = new Koa();
app.use(serve(__dirname + "/public")); //将public下的代码静态化
app.listen(3333, () => {
console.log('项目启动')
})
此时，我们访问http://localhost:3333即可看到页面
四、解决项目部署完成后刷新页面出现404问题
出现这个问题的原因是我们采用了history的路由模式，地址的变化会引起服务器的刷新
我们只需要在app.js对所有的地址进行一下处理即可
首先，需要安装koa中间件：
$ npm i koa2-connect-history-api-fallback #专门处理history模式的中间件
然后，在app.js中注册并使用中间件：
const Koa = require('koa')
const serve = require('koa-static');
const {
historyApiFallback } = require('koa2-connect-history-api-fallback');
const path = require('path')
const app = new Koa();
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
app.use(historyApiFallback({
whiteList: ['/prod-api']
})); // 这里的whiteList是 白名单的意思
app.use(serve(__dirname + "/public")); //将public下的代码静态化
app.listen(3333, () => {
console.log('人资项目启动')
})
这样处理以后，就可以解决这个问题了
五、解决跨域问题
当我们点击登录按钮时，会出现接口404问题
这是因为我们还没有配置生产环境的代理
首先，安装跨域代理中间件：
$ npm i koa2-proxy-middleware
然后，在app.js中配置跨域代理：
const proxy = require('koa2-proxy-middleware')
app.use(proxy({
targets: {
// (.*) means anything
'/prod-api/(.*)': {
target: 'http://xxxxx', //后端服务器地址
changeOrigin: true,
pathRewrite: {
'/prod-api': ""
}
}
}
}))
注意：这里之所以用了pathRewrite，是因为生产环境的请求基础地址是 /prod-api，需要将该地址去掉
总结
到此为止，我们已经成功地将项目部署上线，这个项目总体来说是非常复杂的，但是我们通过模块化开发，将其解耦成一个一个的小模块进行开发，最后再将其组合起来，这样就完成了一个完整的项目。