文章目录
- 前言
- 一、打包之前的路由模式更改
- 二、打包前的性能分析
- 1、运行工具
- 2、打开分析结果观察
- 三、根据结果进行优化
- 3.1 webpack排除打包
- 3.2 对未打包的文件进行CDN配置
- 3.2.1在生产环境时生效
- 1） vue.config.js文件中配置
- 2） 进行if判断
- 3.2.2注入CDN文件到模板
- 3.2.3在html中配置
- 四、打包
- 五、node.js中的配置
- 六、在nodejs环境中解决history页面访问问题
- 七、解决生产环境跨域问题
前言
关于打包项目的配置与node.js中的应用
一、打包之前的路由模式更改
- 修改history模式
const createRouter = () => new Router({
mode: 'history', // 修改路由模式
scrollBehavior: () => ({ y: 0 }),
routes: [...constantRoutes]
})- 在域名加特定的前缀地址，我们可以配置一个base属性，配置为hr
const createRouter = () => new Router({
mode: 'history',
base:'/hr/', //配置项目的基础地址
scrollBehavior: () => ({ y: 0 }),
routes: [...constantRoutes]
})效果如下： http://localhost:88/hr/user
二、打包前的性能分析
作用：分析出体积最大的包，便于优化，减少大小
工具：使用vue-cli自带的分析工具
1、运行工具
npm run preview -- --report2、打开分析结果观察
运行后生成的链接如下,点击查看
打开如下：
三、根据结果进行优化
如图所示element-ui与xlsx.js的包最大，则设置不对其进行打包，使用cdn资源
3.1 webpack排除打包
在vue.config.js文件中configureWebpack配置项下，添加 externals 项，
进行如下配置
configureWebpack: {
name: name,
externals,//具体配置在下面
resolve: {
alias: {
'@': resolve('src')
}
}
},3.2 对未打包的文件进行CDN配置
3.2.1在生产环境时生效
设置环境变量区分，使其在开发阶段从本地读取资源，上线后再去读取线上资源
1） vue.config.js文件中配置
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境2） 进行if判断
如果处于生产环境就给externals项赋值
let externals
let cdn = {}
if (isProduction) {
//排除打包设置
externals = {
//配置排除打包文件
//格式：包名：引入时变量名
//例：import ElementUI（变量名） from 'element-ui'（包名）
'vue': 'Vue',
'element-ui': 'ElementUI',
'xlsx': 'XLSX'
}
//cdn设置
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/xlsx@0.16.6/dist/jszip.min.js',
'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js'
]
}
}3.2.2注入CDN文件到模板
chainWebpack(config) {
config.plugin('preload').tap(() => [
{
rel: 'preload',
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
// 注入cdn变量
// 这行代码 会在执行打包的时候 执行 就会将cdn变量注入到 html模板中
config.plugin('html').tap((args) => {
// args 是注入html模板的一个变量
args[0].cdn = cdn // 后面的cdn就是定义的变量
return args // 需要返回这个参数
})
// 省略其他...
}3.2.3在html中配置
在public/index.html中，过你配置的CDN Config 依次注入 css 和 js
<head>
<!-- 引入样式 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>">
<% } %>
<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
</head>四、打包
运行
npm run build:prod五、node.js中的配置
将打包好的代码打包上线，并在nodejs中代理跨域,使用koa框架部署项目
1）建立web服务文件夹 hrServer
mkdir hrServer- 在该文件夹下，初始化npm
npm init -y- 安装服务端框架koa
npm i koa koa-static- 拷贝打包的dist目录下的文件到hrServer/public下
- 在根目录下创建app.js，代码如下
const Koa = require('koa')
const serve = require('koa-static');
const app = new Koa();
app.use(serve(__dirname + "/public")); //将public下的代码静态化
app.listen(3333, () => { //3333为端口号
console.log('人资项目启动')
})6）package.json中配置指令
npm start指令运行
"scripts": {
"start":"node app.js"
},此时，我们可以访问，http://localhost:3333/
六、在nodejs环境中解决history页面访问问题
我们采用了history的模式，地址的变化会引起服务器的刷新，需要在app.js对所有的地址进行一下处理即可
1)安装 koa中间件
npm i koa2-connect-history-api-fallback //专门处理history模式的中间件2）app.js中注册中间件
const Koa = require('koa')
const serve = require('koa-static');
const { historyApiFallback } = require('koa2-connect-history-api-fallback'); //原基础上添加1 ,引入
const path = require('path')原基础上添加2
const app = new Koa();
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
原基础上添加3
app.use(historyApiFallback({
whiteList: ['/prod-api']
})); // 这里的whiteList是 白名单的意思
app.use(serve(__dirname + "/public")); //将public下的代码静态化
app.listen(3333, () => {
console.log('人资项目启动')
})七、解决生产环境跨域问题
- 在nodejs中代理,安装跨域代理中间件
$ npm i koa2-proxy-middleware2)配置跨越代理
//引入
const proxy = require('koa2-proxy-middleware')
//使用
app.use(proxy({
targets: {
// (.*) means anything
'/prod-api/(.*)': {
target: 'http://ihrm-java.itheima.net/api', //后端服务器地址
changeOrigin: true,
pathRewrite: {
'/prod-api': ""
}
}
}
}))
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
