vue项目打包流程

article/2025/9/3 20:02:19

vue项目打包流程

二、打包优化

1.首先在根目录下面创建一个vue.config.js文件
在这里插入图片描述
2.去除.map文件，在vue.config.js文件里面抛出一个对象，然后把下面两段代码写到对象里面，然后在控制台或者终端通过npm run build命令，打包项目

注：如果一次不行，就在执行一次

module.exports = {}//在vue.config.js文件里面抛出一个对象

publicPath: "./",
productionSourceMap: false, //不输出map文件

在这里插入图片描述
3.开启CDN加速，把下面这段代码写到vue.config.js这个文件里面，切记要写到module.exports = {}这个对象上面

/ 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';// 本地环境是否需要使用cdn
const devNeedCdn = false// cdn链接
const cdn = {// cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）externals: {vue: 'Vue',vuex: 'Vuex','vue-router': 'VueRouter','marked': 'marked','highlight.js': 'hljs','nprogress': 'NProgress','axios': 'axios'},// cdn的css链接css: [],// cdn的js链接js: ['https://cdn.bootcss.com/vue/2.6.10/vue.min.js','https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js','https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js','https://cdn.bootcss.com/axios/0.19.2/axios.min.js']
}

在这里插入图片描述

在这里插入图片描述
3.1：在抛出的那个对象module.exports = {}里面写入下面这段代码

chainWebpack: config => {// ============注入cdn start============config.plugin('html').tap(args => {// 生产环境或本地需要cdn时，才注入cdnif (isProduction || devNeedCdn) args[0].cdn = cdnreturn args})// ============注入cdn start============
},

在这里插入图片描述
3.2：在public这个文件夹下面，找到index.html这个文件，在title这个标签下面，head头标签里面把下面这段代码复制进去

 <!-- 使用CDN的CSS文件 --><% for (var i in htmlWebpackPlugin.options.cdn &&htmlWebpackPlugin.options.cdn.css) { %><link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" /><% } %><!-- 使用CDN的CSS文件 --><!-- 使用CDN的JS文件 --><% for (var i in htmlWebpackPlugin.options.cdn &&htmlWebpackPlugin.options.cdn.js) { %><script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script><% } %><!-- 使用CDN的JS文件 -->

在这里插入图片描述
3.3：上面这些操作步骤就是开始CDN加速的流程，把上面这些步骤操作完以后，我们继续在控制台输入npm run build这个命令，继续打包，打包完成以后在你的文件夹里面应该会有一个dist这个文件，这个文件就是打包后的文件，你可以鼠标右键，点击属性，就可以看到他的体积已经变小啦
在这里插入图片描述
在这里插入图片描述
4.我们继续执行下面的步骤

代码压缩：

4.1：首先我们先在控制台安装命令：npm i -D uglifyjs-webpack-plugin

4.2.然后把下面这段代码写到vue.config.js这个文件里面，这段代码也是要写到抛出的那个对象外面，不能写到抛出的对象里面

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

4.3：接着我们把下面的代码写到configureWebpack这个对象里面，写完以后继续执行npm run build命令，继续打包，打包完成以后再dist这个文件夹里面有个index.html，然后双击打开它，看项目是否能跑起来

 // 代码压缩config.plugins.push(new UglifyJsPlugin({uglifyOptions: {//生产环境自动删除consolecompress: {drop_debugger: true,drop_console: true,pure_funcs: ['console.log']}},sourceMap: false,parallel: true})
)

在这里插入图片描述
5.接着操作公共代码抽离，还是在configureWebpack这个对象里面继续往下写

// 公共代码抽离
config.optimization = {splitChunks: {cacheGroups: {vendor: {chunks: 'all',test: /node_modules/,name: 'vendor',minChunks: 1,maxInitialRequests: 5,minSize: 0,priority: 100},common: {chunks: 'all',test: /[\\/]src[\\/]js[\\/]/,name: 'common',minChunks: 2,maxInitialRequests: 5,minSize: 0,priority: 60},styles: {name: 'styles',test: /\.(sa|sc|c)ss$/,chunks: 'all',enforce: true},runtimeChunk: {name: 'manifest'}}}
}

6.骨架屏

  • 先安装npm install vue-skeleton-webpack-plugin这个命令
  • 然后在src这个文件夹下面创建一个Skeleton文件夹，这个名字可以自定义，在这个文件夹下面创建两个文件，index.js和index.vue这个两个文件

index.js里面写入下面代码

import Vue from 'vue'
import Skeleton from './index.vue'
export default new Vue({components: {Skeleton},template: '<Skeleton />'
})

index.vue里面写入：

<template><div class="skeleton-wrapper"><header class="skeleton-header"></header><section class="skeleton-block"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg=="><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg=="></section></div>
</template><script>export default {name: 'skeleton'}
</script><style scoped>.skeleton-header {height: 40px;background: #1976d2;padding:0;margin: 0;width: 100%;}.skeleton-block {display: flex;flex-direction: column;padding-top: 8px;}</style>

7.下面在vue.config.js写入
注：这段代码写到configureWebpack这个对象里面

config.plugins.push(new SkeletonWebpackPlugin({webpackConfig: {entry: {app: path.join(__dirname, './src/skeleton/indx.js'),},},minimize: true,quiet: true,// 如果不设置那么所有的路由都会共享这个骨架屏组件router: {mode: 'hash',// 给对应的路由设置对应的骨架屏组件，skeletonId的值根据组件设置的idroutes: [{ path: '/home', skeletonId: 'skeleton' }]}}))

下面这段代码写到对象外面，不能学到任何的一个对象里面

//骨架屏渲染
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')//path引入
const path = require('path')

在这里插入图片描述


http://chatgpt.dhexx.cn/article/f2CxawN7.shtml

相关文章

mybatis嵌套循环map（高级用法）

mybatis嵌套循环map（高级用法）

前言&#xff1a; mybatis有默认的list&#xff0c;array&#xff0c;但是没有默认的map。所以不能直接写collection"map"&#xff0c;如果这么写&#xff0c;它会当成是根据map.get(“map”)来取value值&#xff0c;大部分情况下是一个map中是不会有“map”这个key的…
阅读更多...
mybatis中循环map集合操作

mybatis中循环map集合操作

首先声明一个MAP集合&#xff0c;用来存放数据&#xff1a;如下图&#xff1a;声明map集合pd&#xff0c;将数据put到pd中&#xff0c;然后在声明一个map集合params&#xff0c;将pd几个放入params集合中&#xff0c;将params作为参数&#xff0c;参入xml配置文件中&#xff1a…
阅读更多...
IDEA循环MAP的快捷键和自己常用的循环MAP方式

IDEA循环MAP的快捷键和自己常用的循环MAP方式

IDEA循环Map的快捷方式&#xff0c; IDEA 快捷键 map.keySet().iter 循环输出Map的key键 IDEA 快捷键 map.values().iter 循环输出Map的key的value值 // 循环map for (String s : map.keySet()) { // 输出map中key System.out.println(s); // 获取map中key的value map.get…
阅读更多...
java for循环中map_Java用For循环Map

java for循环中map_Java用For循环Map

欢迎进入Java社区论坛&#xff0c;与200万技术人员互动交流 >>进入 根据JDK的新特性,用For循环Map,例如循环Map的Key java 代码 for(String dataKey : paraMap.keySet()) { System.out.println(dataKey ); } 这里要注意的是,paraMap是怎么样定义的,如果是简单的Map para …
阅读更多...
js 循环 map

js 循环 map

js 中&#xff0c;循环 map &#xff0c;遍历取值&#xff0c;需要用 of
阅读更多...
整理了81个Python实战项目列表，都有完整且详细的教程

整理了81个Python实战项目列表，都有完整且详细的教程

学会Python&#xff01;它是一门可多方面发展就业的语言&#xff0c;如果你还处于迷茫期&#xff0c;那就玩玩这九九八十一个项目练练手~ 1 基于机器学习的花卉图片识别 2 电商数码产品销售数据分析与可视化 3 多实惠购物网站前端功能设计实现 4 电商数码产品销售数据分析与可视…
阅读更多...
判断指定程序是否正在运行的Python实战代码

判断指定程序是否正在运行的Python实战代码

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
OpenCV-Python实战（2）——图像与视频文件的处理

OpenCV-Python实战（2）——图像与视频文件的处理

OpenCV-Python实战&#xff08;2&#xff09;——图像与视频文件的处理 0. 前言1. 图像与视频文件处理基础2. 图像的读取与写入2.1 在 OpenCV 中读取图像2.2 使用 OpenCV 写入图像2.3 计算机视觉项目处理流程示例 3. 读取相机画面和视频文件3.1 读取相机画面3.2 访问捕获画面对…
阅读更多...
Python实战：批量修改文本文件

Python实战：批量修改文本文件

Python实战&#xff1a;批量修改文本文件 sub方法、listdir方法、with open as 函数的实战用法 一、需求&#xff1a; 目前我们有一个文件夹&#xff0c;里面有爬虫抓取的txt文档1000篇&#xff0c;但是由于抓取格式问题&#xff0c;每篇文章之后都有几行相同的乱码现在我们…
阅读更多...
Python实战，爬取金融期货数据

Python实战，爬取金融期货数据

大家好&#xff0c;我是毕加锁。 今天给大家带来的是 Python实战&#xff0c;爬取金融期货数据 文末送书&#xff01; 文末送书&#xff01; 文末送书&#xff01; 任务简介 首先&#xff0c;客户原需求是获取https://hq.smm.cn/copper网站上的价格数据(注&#xff1a;获取的是…
阅读更多...
20个Python实战项目(附源码)，拿走就用。

20个Python实战项目(附源码)，拿走就用。

Python是目前最好的编程语言之一。 由于其可读性和对初学者的友好性，已被广泛使用。 那么要想学会并掌握Python，可以实战的练习项目是必不可少的。 接下来，我将给大家介绍20个非常实用的Python项目，帮助大家更好的学习Python。 大家也可根据项目的需求，自己构建解决方法…
阅读更多...
这4个Python实战项目，让你瞬间读懂Python！

这4个Python实战项目，让你瞬间读懂Python！

前言 Python 是一种极具可读性和通用性的编程语言。Python 这个名字的灵感来自于英国喜剧团体 Monty Python&#xff0c;它的开发团队有一个重要的基础目标&#xff0c;就是使语言使用起来很有趣。Python 易于设置&#xff0c;并且是用相对直接的风格来编写&#xff0c;对错误…
阅读更多...
验证email的Python实战代码

验证email的Python实战代码

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
python实战—考勤报表数据分析处理

python实战—考勤报表数据分析处理

标题python实战—考勤报表数据分析处理 需求&#xff1a; 在部分考勤报表导出来的数据中&#xff0c;会出现多次打卡的记录&#xff0c;即excel同一单元格中会有多个时间记录&#xff0c;而Excel本身无法只能进行2个数据分列。 -存在员工忘记打卡&#xff0c;漏打卡、迟到早退…
阅读更多...
python实战-读取xlsx表格批量替换文件名

python实战-读取xlsx表格批量替换文件名

文章目录 一、前言二、解决思路三、具体代码实现四、总结 一、前言 ​  一位在校当老师的同学遇到了一个需求&#xff0c;学生1寸照片是以学生姓名命名&#xff0c;现在需要重命名1寸照片&#xff0c;重命名为exel里对应的学生姓名的身份证号码&#xff0c;我心想这个需求很…
阅读更多...
百看不如一练， 247 个 Python 实战案例！

百看不如一练， 247 个 Python 实战案例！

众所周知&#xff0c;我们在学习Pyhont过程中&#xff0c;大都看书枯燥、看视频进度慢&#xff0c;网上查找的学习案例又比较凌乱不成体系。。。 百看不如一练&#xff0c;今天为大家搜集了一份Python从入门到进阶的实战案例合集&#xff0c;共计247个案例&#xff0c;185页内容…
阅读更多...
整理了200多个Python实战案例，都有完整且详细的教程

整理了200多个Python实战案例，都有完整且详细的教程

不管是学习什么语言&#xff0c;最终目的都是做项目。搜遍全网&#xff0c;整理了200多个Python实战的小项目&#xff0c;都有完整的代码&#xff0c;以及代码中用到的数据源等等。可以直接拿来用&#xff0c;也可以用于学习练手寻找思路。 告别枯燥&#xff0c;60秒学会⼀个⼩…
阅读更多...
精选32个最新Python实战项目(附源码)，拿走就用

精选32个最新Python实战项目(附源码)，拿走就用

Python是目前最好的编程语言之一。由于其可读性和对初学者的友好性&#xff0c;已被广泛使用。那么要想学会并掌握Python&#xff0c;可以实战的练习项目是必不可少的。接下来&#xff0c;我将给大家介绍20个非常实用的Python项目&#xff0c;帮助大家更好的学习Python。大家也…
阅读更多...
Appium + python 实战

Appium + python 实战

文章目录 Appium介绍Appium 原理Appium使用Appium Python实战 Appium介绍 是一个移动端的自动化测试框架&#xff0c;是跨平台的&#xff0c;支持ios和Android平台上的移动原生应用、混合以及web移动应用&#xff0c;可以针对不同的平台使用一套API来编写测试脚本&#xff0c…
阅读更多...
30个有趣的Python实战项目（附源码）

30个有趣的Python实战项目（附源码）

大家好&#xff0c;今天给大家重磅推荐我的好朋友J哥的公众号——「菜J学Python」&#xff0c;J哥经常在公众号分享有趣的Python实战项目&#xff0c;而且基本都附代码和数据。废话不多说&#xff0c;大家先点击以下卡片关注一波&#xff1a; 点击关注菜J学Python J哥是985金融…
阅读更多...
推荐文章

Copyright @ 2022~2023