Vue项目打包与上线实战-优快云博客

本文链接：https://blog.youkuaiyun.com/Android062005/article/details/127193572

本文介绍了Vue项目的打包上线步骤，包括在终端执行打包命令，处理dist目录下的路径问题，以及如何将项目部署到码云服务器。同时，还讨论了项目优化，如查看打包日志，利用CDN加速，以及路由懒加载等提升性能的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

项目打包

1. 打开终端

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

npm runbuild|
yarnbuild

打包完成

2. dist

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

2.这下我们的控制台就会报错,仔细看是我们文件的路径报的错,因为我们在网络请求的时候我们没有src这个文件又何来 ./ @/ 一说呢3.我们此时要来到 vue.config.js 文件夹 ,要修改一下文件的路径module.exports = defineConfig({publicPath: './'})

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

3. 上线

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

1.我们要把我们所有的代码提交到码云的仓库 ,顺便带大家复习一下git add . git commit -m "feat:打包上线"git push * 2.但是我们此时的代码仓库并没有我们的 dist 文件夹* 这时我们要来到我们的.gitignore , 注释这个代码
3.我们在重复第一步,提交代码,我们就可以看见
4.直接部署服务器
================

项目优化

1.查看打包的日志

1.在 package.json 以下的位置,添加 --report

 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --report", "lint": "vue-cli-service lint"
 }
}

2.重新运行npm run build 3.打包完成后，发现在 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'}
}
}

2./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> 3.重新运行 npm run build 命令，对比配置 externals 前后文件的体积变化。4.如果我们链入了某些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' 5.注释之后,在 /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}
]