当前位置：首页 > news >正文

vue-cli 项目打包优化-基础篇

news 2025/7/7 14:37:00

1、项目打包完运行空白

引用资源路径问题，打包完的【index.html】文件引用其他文件的引用地址不对

参考配置：https://cli.vuejs.org/zh/config

修改vue.config.js ，根据与后端或运维沟通修改

module.export = {// 默认 publicPath: '/'// 打包自测阶段可改为 './'，实际值根据 后端或运维 沟通决定publicPath: './'
}

2、路由

路由模式： hash 、 history

hash：地址携带 # ，正常打包可访问，前端测试开发阶段使用
history：地址栏会改变，可以使用浏览器的【返回】按钮，需要服务器端的支持，需要【后端或运维】做相关配置，做一下路径重定向问题

路由懒加载

export const Routes = [{path: '/xxx',component: Xxxx,children: [{// 懒加载写法component: () => import('@/xxx/xxx')}]},...
]

3、环境变量

参考文档：https://cli.vuejs.org/zh/guide/mode-and-env.html

根目录下新建【.env.development】【.env.production】【.env.test】，生产、开发、测试环境

【NODE_ENV】，【BASE_URL 】是默认的环境变量可访问无法被修改，【NODE_ENV】代表当前的环境模式，【BASE_URL】代表的是当前根路径
自定义环境变量规则：必须以【VUE_APP_】开头否则无效
访问方式：在开发中通过【process.env.变量名称】的方式获取变量值

# 开发环境配置
NODE_ENV = 'development'# 页面标题
VUE_APP_TITLE = 'xxx'# 开发环境
VUE_APP_BASE_API = '/dev-api'# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

根据不同环境做相应的配置

4、安装可视化插件

npm install webpack-bundle-analyzer

const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {// 写法一configureWebpack: {plugins: [new BundleAnalyzer()]}// 写法二configureWebpack:config=>{config.plugins.push(new BundleAnalyzer())}
}

5、配置 `vue.config.js`

module.exports = {// 1、生产模式下打包不生成map映射文件（调试代码时显示代码错误行数，文件很大）productionSourceMap: false,// 2、拆分app.js文件，路由写成懒加载模式，页面js会从app.js拆分出去// 	2.1、代码总体体积变大，但加载速度提升// 3、拆分vendors.js，依赖文件（vue、vue-router、vueX、element-ui等）// 	3.1、ui组件按需引入，自动化引入// 4、代码压缩、图片压缩// 5、cdn// 6、根据文件大小类型选择进一步优化
}