likes
comments
collection
share

vue打包上线如此简单

作者站长头像
站长
· 阅读数 38

大家好,我是大帅子,最近好多人私信我,要我出一期vue的打包上线的文章,那么今天他来了,废话不多说,我们直接开始吧,我们顺便给大家提一下vue项目中的优化

项目打包

1. 打开终端

直接在终端输入 我把npm 跟 yarn的打包命令都放在这里了,yarn 不会安装跟使用的兄弟们, 我之前的文章里面有 , yarn的安装以及使用 

npm run  build
    |
yarn  build

vue打包上线如此简单 输入完命令的兄弟们呢就不要急, 我们喝一个咖啡,上一个厕所,马上就好,遇到黄色的提示也不要慌,等待即可

打包完成 vue打包上线如此简单

2. dist

  1. 此时我们的目录就会多一个dist的根目录,但是我们此时去打开我们的index.html,就会发现项目出不来,并且我们的项目有一堆爆红

vue打包上线如此简单

  1. 这下我们的控制台就会报错,仔细看是我们文件的路径报的错,因为我们在网络请求的时候我们没有src这个文件又何来 ./ @/ 一说呢

  2. 我们此时要来到 vue.config.js 文件夹 ,要修改一下文件的路径

    module.exports = defineConfig({
  publicPath: './'
})

vue打包上线如此简单

  1. 我们此时再重复第一步的操作,重新打包 , 等到打包完成

3. 上线

  1. 这时我们以码云为例,例如我们的项目需要上线,我们就借用码云的服务器

  • 1.我们要把我们所有的代码提交到码云的仓库 ,顺便带大家复习一下

    git add . 
git commit -m "feat:打包上线"
git push
    1. 但是我们此时的代码仓库并没有我们的 dist 文件夹
    • 这时我们要来到我们的.gitignore , 注释这个代码 vue打包上线如此简单
    1. 我们在重复第一步,提交代码,我们就可以看见 vue打包上线如此简单

  • 4.直接部署服务器 vue打包上线如此简单

ok 此时我们就完成了项目的上线

项目优化

1.查看打包的日志

vue打包上线如此简单

  1. 在 package.json 以下的位置,添加 --report
 "scripts": {
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build --report",
   "lint": "vue-cli-service lint"
 }
}
  1. 重新运行 
    npm run build
  2. 打包完成后，发现在 dist 目录下多了一个名为 report.html 的文件。在浏览器中打开此文件，会看到详细的打包报告
我们可以观察那个包大,我们就可以直接搞定他~

2. CDN 加速

cnd加速

让我们的用户从官网自己下载

而不是放在我们的服务器,占有我们自己的内存

  1. 我们还是来到 vue.config.js 
    module.exports = {
 // 省略其它代码...

 // 增强 vue-cli 的 webpack 配置项
 configureWebpack: {
   // 打包优化
   externals: {
     // import导包的包名: window全局的成员名称
     echarts: 'echarts',
   }
 }
}
    这里我把常用的cnd加速包放在这
module.exports = {
// 省略其它代码...
publicPath: './',

// 增强 vue-cli 的 webpack 配置项
configureWebpack: {
  // 打包优化
  externals: {
    // import导包的包名: window全局的成员名称
    echarts: 'echarts',
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    dayjs: 'dayjs',
    'element-ui': 'ELEMENT',
    'vue-quill-editor': 'VueQuillEditor',
    'vuex-persistedstate': 'createPersistedState'
  }
}
}

  1. /public/index.html 文件的 <body> 结束标签之前，新增如下的资源引用：(我们可以去每个官网都有)

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

    常用的一些cdn包

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.3/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.6/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex-persistedstate@3.2.1/dist/vuex-persistedstate.umd.js"></script>

  2. 重新运行 npm run build 命令，对比配置 externals 前后文件的体积变化。

  3. 如果我们链入了某些css的样式,我们需要注释点

    例 :

    // import 'element-ui/lib/theme-chalk/index.css'

// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'

  4. 注释之后,在 /public/index.html 文件的 <title></title> 标签之后，引入需要的 css 样式：

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css">

3. 路由懒加载

  1. 什么是路由懒加载：

    • 仅在需要的时候，加载路由对应的组件页面

  2. 好处：

    • 可以提高 index.html 首页的打开速度
1. 下包
npm install --save-dev @babel/plugin-syntax-dynamic-import
2. 修改配置文件

修改项目根目录下的 babel.config.js 配置文件，新增 plugins 节点：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  // 实现路由组件按需导入的 babel 插件
+ plugins: ['@babel/plugin-syntax-dynamic-import']
}
3. /src/router/index.js

在/src/router/index.js模块中，基于 const 组件 = () => import('组件的存放路径') 语法，改造每个路由组件的导入方式。例如：

// 导入 Reg 组件
// import Reg from '@/views/Reg/Reg.vue'
const Reg = () => import('@/views/Reg/Reg.vue')

// 导入 Login 组件
// import Login from '@/views/Login/Login.vue'
const Login = () => import('@/views/Login/Login.vue')

// 使用
const routes =[
    {
        path : '/login',
        component : Login
    }
]
好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏 🐣---->🦅         还需努力!大家一起进步!!!
转载自:https://juejin.cn/post/7123916846511685662
评论
请登录