项目打包及后续工作

打包的目的：

因为项目是要上线的，项目是为了让别人使用，所以我们不可能让使用项目的人都安装并配备环境，也不可能把源文件给别人，所以需要把自己的代码发布成二进制形式，让其它环境方便运行，这就是打包

打包需要做的是：

1、优化项目启动速度,和性能
2、必要的清理数据
3、减少打包后的体积

打包步骤

项目完成后一般会使用webpack进行打包，一般是执行命令npm run build 然后会得到dist目录，然后需要在vue.config.js中加上代码：

{
  	publicPath: './'
}

在开发过程中该路径为"/",增加上面的代码主要是为了打包后可以双击打开index.html

路由懒加载：

我们写的加载路由代码可能是这样的：

const Login = import('@/views/login/index')
{
    path: '/login',
    component: Login,
    hidden: true
  }

但是这样写就造成了每次进入系统时，会加载所有的路由，造成了页面加载很慢，用户体验不是很好，我们就可以改成下面这种路由懒加载的方式

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  }

一个路由对一个组件，表示一个页面。懒加载的意思是：只有在路由进入这个页面时，才去加载这个组件对应的资源。提高了性能。甚至我们还可以在路由懒加载的路径中，添加魔法注释：

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue");

这样我们在进行查看压缩文件时比较好找文件

打包优化；包的大小

我们可以执行命令npm run preview -- --report查看包的大小，这个命令会从我们的入口main.js进行依赖分析，分析出各个包的大小，方便我们进行观察和优化。执行完这个命令，我们会看到控制台中如下类似的输出 http://localhost:9526/report.html点击访问就可以

去除项目中的注释：

可以在vue.config.js中，配置：

chainWebpack(config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
}

去除大的引用包（打包瘦身）

有的引用包特别的大，我们就可以让这些包在打包的时候不要打包进来，我们使用的时候从网络中引用这些包。方法：先找到 vue.config.js，添加 externals 项，具体如下：

configureWebpack: {
  // 配置单页应用程序的页面的标题
  // 省略其他....
  externals: {
     /**
      * externals 对象属性解析。
      *  基本格式：
      * '包名' : '在项目中引入的名字'
      *  
    */
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'xlsx': 'XLSX'
  },
    
    
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

再次打包我们就会发现包的大小小了很多

引入去除的包

在开发项目时，文件资源还是可以从本地node_modules中取出，而只有项目上线了，才需要去使用外部资源。此时我们可以使用环境变量来进行区分

在`vue.config.js`文件中：

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
      /**
      * externals 对象属性解析：
      * '包名' : '在项目中引入的名字'
    */
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
    ]
  }
}

webpack配置externals配置项

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  //添加下面这一行就可以
+ externals: externals,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

注入CDN配置到html模板

在vue.config.js中，设置

chainWebpack(config) {
  config.plugin('preload').tap(() => [
    {
      rel: 'preload',
      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      include: 'initial'
    }
  ])
  // 省略其他......
  
  // 注入cdn变量 (打包时会执行)
+  config.plugin('html').tap(args => {
+    args[0].cdn = cdn // 配置cdn给插件
+    return args
+  })
  // 省略其他...
}

找到 public/index.html 通过配置CDN Config 依次注入 css 和 js。
修改head的内容如下：


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>

      <!-- 引入样式 -->
+      <% 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

更改publicPath

publicPath: './',

CDN

CDN我们用它来提高访问速度把一些静态资源：css， .js，图片，视频放在第三方的CDN服务器上，可以加速访问速度。
使用好处：

减少应用打包出来的包体积
加快静态资源的访问

在nodejs环境中布署应用

将打包好的代码打包上线(本地模拟)
方式一：前端修改生产环境的 baseUrl ，然后重新打包。
到现在为止，我们已经完成了一个前端工程师的开发流程，按照常规的做法，此时，运维/后端会将我们的代码部署到阿里云的nginx服务上，对于我们而言，我们可以将其部署到本机的nodejs环境中
方式二：按照以下方式进行

建立web服务文件夹 hrServer
在该文件夹下，初始化npm
执行命令：npm init -y
安装服务端框架koa(也可以采用express或者egg)
执行命令：npm install koa koa-static
hrServer中新建public目录，并拷贝上面打包的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, () => {
  console.log('**项目启动: 3333端口')
})

vue-router两种路由模式

hash模式

hash模式 ：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号

hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题

history模式：

history模式：美化后的hash模式，路径中不包含“#”。依赖于Html5 的 history api

由于改变了地址, 刷新时会按照修改后的地址请求后端, 需要后端配置处理, 将地址访问做映射, 否则会404
当我们在项目中修改路由模式为history时，刷新后会报错
解决方法：这个方法专门用于处理history模式的中间件
步骤一：

npm install koa2-connect-history-api-fallback

步骤二： 注册中间件：

const Koa  = require('koa')
const serve = require('koa-static');
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const app = new Koa();
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
app.use(historyApiFallback({ 
  whiteList: ['/api']
}));  // 这里的whiteList是 白名单的意思

app.use(serve(__dirname + "/public")); //将public下的代码静态化

app.listen(3333, () => {
  console.log('**项目启动')
})

这样就解决了刷新后404的问题

在nodejs环境中解决生产环境跨域问题

修改环境变量

VUE_APP_BASE_API = '/api'

安装跨域代理中间件

hr-serve 执行命令：npm install koa2-proxy-middleware

配置跨越代理

const Koa  = require('koa')
const serve = require('koa-static');
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const proxy = require('koa2-proxy-middleware')
const app = new Koa();

app.use(proxy({
  targets: {
    '/api/(.*)': {
        target: 'http://ihrm-java.itheima.net', //后端服务器地址
        changeOrigin: true
    }
  }
}))
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
app.use(historyApiFallback({ 
  whiteList: ['/api']
}));  // 这里的whiteList是 白名单的意思
app.use(serve(__dirname + "/public")); //将public下的代码静态化

app.listen(3333, () => {
  console.log('**项目启动')
})

这些差不多就是项目完成后上线前的工作。

项目完成后的一系列打包工作