vue打包上线如此简单
大家好,我是大帅子,最近好多人私信我,要我出一期vue的打包上线的文章,那么今天他来了,废话不多说,我们直接开始吧,我们顺便给大家提一下vue项目中的优化
项目打包
1. 打开终端
直接在终端输入 我把npm
跟 yarn
的打包命令都放在这里了,yarn 不会安装跟使用的兄弟们, 我之前的文章里面有 , yarn的安装以及使用
npm run build
|
yarn build
输入完命令的兄弟们呢就不要急, 我们喝一个咖啡,上一个厕所,马上就好,遇到黄色的提示也不要慌,等待即可
打包完成
2. dist
- 此时我们的目录就会多一个
dist
的根目录,但是我们此时去打开我们的index.html
,就会发现项目出不来,并且我们的项目有一堆爆红
-
这下我们的控制台就会报错,仔细看是我们文件的路径报的错,因为我们在网络请求的时候我们没有src这个文件又何来
./
@/
一说呢 -
我们此时要来到
vue.config.js
文件夹 ,要修改一下文件的路径module.exports = defineConfig({ publicPath: './' })
- 我们此时再重复第一步的操作,重新打包 , 等到打包完成
3. 上线
- 这时我们以码云为例,例如我们的项目需要上线,我们就借用码云的服务器
-
1.我们要把我们所有的代码提交到码云的仓库 ,顺便带大家复习一下
git add . git commit -m "feat:打包上线" git push
-
- 但是我们此时的代码仓库并没有我们的
dist
文件夹
- 这时我们要来到我们的
.gitignore
, 注释这个代码
- 但是我们此时的代码仓库并没有我们的
-
- 我们在重复第一步,提交代码,我们就可以看见
-
4.直接部署服务器
ok 此时我们就完成了项目的上线
项目优化
1.查看打包的日志
- 在
package.json
以下的位置,添加--report
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --report",
"lint": "vue-cli-service lint"
}
}
- 重新运行
npm run build
- 打包完成后,发现在
dist
目录下多了一个名为report.html
的文件。在浏览器中打开此文件,会看到详细的打包报告
我们可以观察那个包大,我们就可以直接搞定他~
2. CDN 加速
cnd加速
让我们的用户从官网自己下载
而不是放在我们的服务器,占有我们自己的内存
- 我们还是来到
vue.config.js
这里我把常用的cnd加速包放在这module.exports = { // 省略其它代码... // 增强 vue-cli 的 webpack 配置项 configureWebpack: { // 打包优化 externals: { // import导包的包名: window全局的成员名称 echarts: 'echarts', } } }
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'
}
}
}
-
/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>
-
重新运行
npm run build
命令,对比配置externals
前后文件的体积变化。 -
如果我们链入了某些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'
-
注释之后,在
/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. 路由懒加载
-
什么是路由懒加载:
- 仅在需要的时候,加载路由对应的组件页面
-
好处:
- 可以提高 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