打包发布

_62
595 阅读3分钟

打包发布的一些步骤

1 理解打包

1.1 打包作用

作用：用vue-cli内部集成的webpack，把.vue,.less,.js等打包成浏览器可直接执行的代码.html,.css,.js。
结果：会在项目根目录下创建 /dist目录，在这个目录下产出打包后的结果。

1.2 打包后结构

npm run build

image.png

image.png

image.png app.hash值.js文件:主入口
chunk-vendors.hash值.js中统一放第三方代码，例如vue-router,vuex,vue...
chunk-hash值.js为某个模块对应的js
chunk-chunk-hash.js.map会记录当前的js文件中包含哪个模块和对应位置，有利于代码出错快速找到源代码位置

image.png

image.png

2 打包设置静态资源路径问题

问题

无法双击启动/dist中的index.html

原因

所有静态资源的目录都是/开头的，意思是访问url根目录下的文件，但是服务器是以vscode根目录为准，路径找不到

解决方法

添加配置,在vue.config.js文件中。添加：

module.exports = {
  // https://cli.vuejs.org/zh/config/#publicpath
  // 设置打包后访问资源方式，以是相对路径来访问
  // dist目录下的index.html就可以直接双击打开
  publicPath: './'
}

添加完成后进行重新打包

3 优化打包

目标

1.尽可能使文件小一点
2.页面打开尽可能快

3.1 打包分析工具

vuecli提供一个打包分析的工具:vue-cli-service build --report 可以在package.json中的bulid后加上--report然后重新打包,打包完成后会有一个新的文件report.html可以查看打包结果分析说明

image.png
打开效果 image.png

3.2 路由懒加载

配置路由文件中，设置component有两个方式：

直接先导入在设置

image.png

懒加载

image.png 区别：
1.直接先导入，在设置，会导致所有引入的文件全部打包到1个js中
缺点：导致首页加载慢
优点：一次打开后，后续不需要请求资源，因为已经加载完了
2.懒加载，会导致所有引入的文件单个打包
缺点：加载需要等待
优点：用户访问页面时，才会去加载
举例：你看一部电视剧，优先下载完所有集数开始看，或者下载一集看一集 结论： 高频的页面统一打包，低频的页面懒加载

3.3 按需导入

在使用组件库时，不用全部导入，比较前后

image.png

步骤

安装依赖包

npm i babel-plugin-import -D

在项目根目录创建babel.config.js

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ],
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

将全局导入改为按需导入

image.png 可以在main.js中直接按需导入或者单独创建文件来导入

3.4 去掉打包后的 console.log

image.png
这些输出内容不会显示

步骤

1 安装依赖

npm install terser-webpack-plugin -D

修改配置文件vue.config.js

module.exports = {
 
  configureWebpack: (config) => {
      // 在webpack的配置对象 config的 optimization属性的minimizer数组的第一个元素的options中设置....
      // 在打包之后的js中去掉console.log
     config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
  },
  publicPath: './'
}

检查控制台

image.png

4 上线 (For example:gitee)

1.修改.gitignore把/dist从忽略文件中删除
2.正常提交代码

git add . // 提交到库
git commit -a -m "日志" --no--verify
// 由于dist目录下的js代码不符合eslint要求，所以在commit时，可能会提交不上去，在后边加上--no--verify，为本次提交不验证eslint
## git push

可以搭建本地服务器进行模拟 (node+express)

image.png

const express = require('express')
const app = express()
const port = 3000

app.use(express.static('public'))

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

5 打包成App

使用Hbuilder X进行打包举例

image.png 选择5+App，将之前打包好的/dist复制覆盖即可

image.png 可以在图标配置中配置图标 image.png 如果出现校验可以去实名认证或者去掉通信权限

image.png

image.png 源码处选择删除

image.png 打包完成可以下载上传手机安装使用

image.png

avatar
文章
阅读
粉丝