项目打包与nodejs环境中应用

酸奶味的核桃

已于 2022-06-06 17:18:31 修改

阅读量582

点赞数

分类专栏：基础知识文章标签： vue.js elementui javascript

于 2022-06-06 13:08:34 首次发布

本文链接：https://blog.csdn.net/qq_58061710/article/details/125143768

版权

基础知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

前言
一、打包之前的路由模式更改
二、打包前的性能分析
- 1、运行工具
- 2、打开分析结果观察
三、根据结果进行优化
四、打包
五、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 -- --report

2、打开分析结果观察

运行后生成的链接如下,点击查看

打开如下：
分析结果

三、根据结果进行优化

如图所示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-middleware

2)配置跨越代理

//引入
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': ""
       }
   }
 }
}))