一.使用Vue ui可视化面板

第一步：使用Windows+R快捷键,输入cmd,打开小黑窗,然后输入vue ui命令,运行成功之后会自动打开可视化面板,如下图:

 

第二步：导入或创建一个vue项目开始使用

 二.生产打包报告

第一步：在package.json页找到vue-cli-service build后加--report
​​​​​​

第二步：打包后就可以在dist文件中找到report.html 

 三.去除console打印

第一步：先安装插件

npm i babel-plugin-transform-remove-console --save-dev //下载去除console的依赖

第二步：在根目录下找到babel.config.js文件

操作，如图：

// 这是项目发布阶段需要用到的 babel 插件
const prodPlugins = []
// 如果为production环境下就在prodPlugins数组中添加'transform-remove-console'
//如果为开发环境就会正常输出console方便调试
if (process.env.NODE_ENV === 'production') {
	prodPlugins.push('transform-remove-console')
}
module.exports = {
	presets: [
		'@vue/cli-plugin-babel/preset'
	],
	plugins: [
		// 发布产品时候的插入数组
		// ...为扩展运算符把prodPlugins的每一项添加到该数组中
		...prodPlugins,
	]
}

四.去除生产环境sourceMap

  •  vue项目打包之后js文件夹中，会自动生成一些map文件，占用相当一部分空间
  • sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间。
  • map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

通过vue-cli 3.0 工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的中心，放到具体功能和业务逻辑的实现上。
如果程序员有修改webpack默认配置的需要，可以在项目根目录中，按需创建vue.config.js
从而对项目的打包发布过程做自定义的配置。

生产环境是不需要sourceMap的，在项目根目录创建vue.config.js 如下配置可以去除：

module.exports = {
    publicPath: './', // 静态资源路径（默认/，打包后会白屏）
	productionSourceMap: false, //去除生产环境的productionSourceMap
}

配置后重新打包，dist文件中map文件将全部删除。

五.为开发模式和发布模式指定不同的打包入口

 第一步：在项目根目录中创建或找到vue.config.js文件 配置如下：

module.exports = {
	publicPath: './',
	//去除生产环境的productionSourceMap
	productionSourceMap: false,
	chainWebpack: config => {
		//发布模式
		// 用config.when函数判断我们当前处于什么编译模式
		config.when(process.env.NODE_ENV === 'production', config => {
			//如果处于打包阶段用entry找到默认的打包入口，调用clear则是删除默认的打包入口
			//add添加新的打包入口
			config.entry('app').clear().add('./src/main-prod.js')
		})
		//开发模式
		config.when(process.env.NODE_ENV === 'development', config => {
			config.entry('app').clear().add('./src/main-dev.js')
		})
	}
}

第二步：在src文件下创建 main-prod.js和 main-dev.js然后将原有的main.js全部复制到main-dev中去，main-prod则是打包入口按需配置。

六.第三方库启用CDN

通过externals加载外部CDN资源

第一步：在vue.config.js文件下的发布模式里进行配置。

具体配置如下：       

module.exports = {
	publicPath: './',
	//去除生产环境的productionSourceMap
	productionSourceMap: false,
	chainWebpack: config => {
		//发布模式
		// 用config.when函数判断我们当前处于什么编译模式
		config.when(process.env.NODE_ENV === 'production', config => {
			//如果处于打包阶段用entry找到默认的打包入口，调用clear则是删除默认的打包入口
			//add添加新的打包入口
			config.entry('app').clear().add('./src/main-prod.js')
			//使用externals设置排除项
			config.set('externals', {
				vue: 'Vue',
				'vue-router': 'VueRouter',
				axios: 'axios',
				// lodash: '_',
				echarts: 'echarts',
				nprogress: 'NProgress',
				// 'vue-quill-editor': 'VueQuillEditor'
			})
		})
		//开发模式
		config.when(process.env.NODE_ENV === 'development', config => {
			config.entry('app').clear().add('./src/main-dev.js')
		})
	}
}

 第二步：需要在public/index.html文件的头部，添加如下的CDN资源引用：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>demo title</title>
	     <!-- 先判断是否是发布模式，发布模式引入cdn资源 -->
	       <% if(htmlWebpackPlugin.options.isProd){ %>
	          <!-- nprogress 的样式表文件 -->
	             <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
	             <!-- 富文本编辑器 的样式表文件 -->
	             <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
	             <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
	             <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
	             <!-- element-ui 的样式表文件 -->
	             <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />
	         
	             <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
	             <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
	             <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	             <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
	             <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
	             <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
	             <!-- 富文本编辑器的 js 文件 -->
	             <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
	             <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
	         
	             <!-- element-ui 的 js 文件 -->
	             <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
	       <% } %>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

踩坑记录： 曾遇到报错 Uncaught TypeError: Cannot redefine property: $router 

解决方案：

vue-cli 项目优化时报错 Uncaught TypeError: Cannot redefine property: $router_m0_51608940的博客-CSDN博客

七.通过CDN优化ElementUI 

第一步：在main-prod.js中，注释掉element-ui按需加载的代码

 第二步：在index.html的头部区域中，通过CDN加载element-ui的js和css样式

<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" />
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

注意版本等级 这里cdn地址版本较低

八.首页内容定制

开发环境的首页和发布环境的首页展示内容的形式有所不同
如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现
第一步：我们可以通过插件的方式来定制首页内容，打开vue.config.js，编写代码如下：

module.exports = {
	publicPath: './',
	//去除生产环境的productionSourceMap
	productionSourceMap: false,
	chainWebpack: config => {
		//发布模式
		// 用config.when函数判断我们当前处于什么编译模式
		config.when(process.env.NODE_ENV === 'production', config => {
			
			//如果处于打包阶段用entry找到默认的打包入口，调用clear则是删除默认的打包入口
			//add添加新的打包入口
			config.entry('app').clear().add('./src/main-prod.js')
			
			//使用externals设置排除项
			config.set('externals', {
				vue: 'Vue',
				'vue-router': 'VueRouter',
				axios: 'axios',
				// lodash: '_',
				echarts: 'echarts',
				nprogress: 'NProgress',
				// 'vue-quill-editor': 'VueQuillEditor'
			})
			
			//使用插件
			config.plugin('html').tap(args => {
				//添加参数isProd
				args[0].isProd = true
				return args
			})
		})
		//开发模式
		config.when(process.env.NODE_ENV === 'development', config => {
			
			config.entry('app').clear().add('./src/main-dev.js')
			
			//使用插件
			config.plugin('html').tap(args => {
				//添加参数isProd
				args[0].isProd = false
				return args
			})
		})
	}
}

第二步：然后在public/index.html中使用插件判断是否为发布环境并定制首页内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>demo title</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- element-ui 的样式表文件 -->
	<linkrel="stylesheet"href="https://cdn.staticfile.org/elementui/2.8.2/themechalk/index.css" />
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    <% } %>
  </head>
  .......

# windows
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue