打包上线流程

打包

修改路由模式

开发到现在,我们一直都在用hash模式,打包我们尝试用history模式

改成history模式非常简单,只需要将路由的mode类型改成history即可

// 创建路由实例
const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  // 指定路由规则
  routes: [
    ...constantRoutes // 静态路由, 首页
  ]
})

我们会发现刷新没有任何问题 => 是因为 webpack 默认配好了对于 history 模式的处理

性能分析和CDN的应用

  1. 确保 vue.config.js 文件里的publicPath的值为: ‘/’
    在这里插入图片描述
  2. 执行yarn xxx 命令进行打包
  3. 性能分析命令:
$ yarn preview -- --report

这个命令会从我们的**入口main.js**进行依赖分析,分析出最大的包,方便我们进行观察和优化
执行完这个命令,我们会看到如下的页面
在这里插入图片描述
如图所以,方块越大,说明该文件占用的文件越大,文件越大,对于网络带宽和访问速度的要求就越高,这也就是我们优化的方向

像这种情况,我们怎么优化一下呢 => cdn 加速!!!

webpack排除打包

CDN加速, 是一个比较好的方式 (一般要付费) , 一些开源的包, 有免费服务: https://www.bootcdn.cn/

使用方式

先找到 vue.config.js, 添加 externalswebpack 不打包 xlsxelement

vue.config.js

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: {
    // key(要排除的包名), value(引入的CDN包的全局变量名)
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'xlsx': 'XLSX',
    'moment': 'moment'
  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
},

再次运行,我们会发现包的大小已经大幅减小
在这里插入图片描述

注意: 此时由于排除了一些包, 所以代码是无法运行的! 必须配置 cdn 包的加载

CDN文件配置

但是,没有被打包的几个模块怎么处理?

可以在**vue.config.js**中采用CDN的方式,在页面模板中预先引入

但是请注意,这时的配置实际上是对 开发环境 生产环境 都生效的,

在开发环境时,没有必要使用CDN,此时我们可以使用环境变量来进行区分

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
    // key(要排除的包名), value(引入的CDN包的全局变量名)
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'xlsx': 'XLSX',
    'moment': 'moment'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue/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/jszip.min.js',
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js',
      'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js'
    ]
  }
}

底下使用 externals

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: externals,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
},

注入 CDN文件变量 到模板

之后通过 html-webpack-plugin注入到 index.html之中:

chainWebpack(config) {
  // it can improve the speed of the first screen, it is recommended to turn on preload
  config.plugin('preload').tap(() => [
    {
      rel: 'preload',
      // to ignore runtime.js
      // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
      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>
  <!-- 引入样式 -->
  <% 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>
<% } %>

最后,进行打包

$ yarn build:prod

在 nodejs 环境中应用并代理跨域(可选)

**目标**将打包好的代码打包上线,并在nodejs中代理跨域

使用 koa 框架部署项目

到现在为止,我们已经完成了一个前端工程师的开发流程,按照常规的做法,此时,运维会将我们的代码部署到阿里云的nginx服务上,对于我们而言,我们可以将其部署到本机的nodejs环境中

部署: 自动化部署 /手动部署

第一步,建立web服务文件夹 hrServer

第二步,在该文件夹下,初始化npm

$ yarn init -y

第三步,安装服务端框架koa(也可以采用express或者egg)

$ yarn add 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端口')
})

此时,先清除缓存, 保证退出登录状态, 如果发现缓存清了, 还卡着不进去(有可能是免费的cdn服务不稳定) 我们再访问页面;

解决history页面访问问题

但是,此时存在两个问题,

  1. 当我们刷新页面,发现404

这是因为我们采用了history的模式,地址的变化会引起服务器的刷新,我们只需要在app.js对所有的地址进行一下处理即可

安装 koa中间件

$ yarn add koa2-connect-history-api-fallback #专门处理history模式的中间件

注册中间件

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 的问题 (注意: 如果点了登录, 记得清除cookies 再测试)

解决生产环境跨域问题

问题说明

其实 vue-cli 的 webpack 代理只存在于开发期,当我们上线到node环境或者nginx环境时,需要我们再次在环境中代理

node 配置反向代理

安装跨域代理中间件

$ yarn add 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: {
    // (.*) means anything
    '/api/(.*)': {
        target: 'http://ihrm-java.itheima.net', //后端服务器地址
        changeOrigin: true,
        // 配置代理, 会多一个 /api 路径, 如果希望保留, 就不重写
        // 如果不希望保留, 就重写掉
        // pathRewrite: { 	
        //   '/api': ""
        // }
    }
  }
}))

// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
app.use(historyApiFallback({ 
  whiteList: ['/api']
}));  // 这里的whiteList是 白名单的意思
app.use(serve(__dirname + "/public")); //将public下的代码静态化

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

前端修改生产环境的 baseUrl
.env.production

VUE_APP_BASE_API = '/api'

重新打包, 将目录重新给到node public 目录, 重新运行

yarn build:prod

重新运行

node app.js

uni-app 打包

首先找到package.json文件, 我们看一下打包的命令是什么?
在这里插入图片描述
接下来, 我们输入该命令
在这里插入图片描述
他告诉我们将dist文件夹中build文件夹下的内容, 导入到微信开发者工具中运行
在这里插入图片描述
打开之后呢, 我们的项目就运行起来了
接下来, 我们需要点击右上角的上传按钮, 将我们的项目进行上传
在这里插入图片描述
我们点击确定即可
在这里插入图片描述
我们填写完毕之后, 点击上传
在这里插入图片描述
上传成功之后, 我们需要打开, 微信公众平台, 选择自己的小程序进行登录
登录成功之后, 需要我们打开版本管理
在这里插入图片描述
在下面的开发版本中, 我们就可以看到我们上传上来的项目
在这里插入图片描述
我们点击提交审核, 会提示一个弹窗, 我们点击下一步即可
在这里插入图片描述
点击下一步会跳转到另一个页面, 需要我们填写详细信息, 填写完毕,在此点击提交审核
在这里插入图片描述
我们再返回回来之后, 状态就变成了审核版本
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值