vue项目打包优化

一、打包路径和路由模式

第一步：在vue.config.js配置打包路径

复制代码

module.exports = {
	publicPath:'./'
}

第二步：在router/index.js将路由模式改为hash

复制代码

const router = new VueRouter({
  mode: "hash",
  base: process.env.BASE_URL,
  routes,
});

如果项目上线要求是history模式，需要告诉后端重定向一下路径。

二、代理和环境变量

开发环境：.env.development

复制代码

VUE_APP_ENV = 'dev'

VUE_APP_BASE_API = 'http://localhost:3000'

生产环境：.env.production

复制代码

VUE_APP_ENV = 'pro'

VUE_APP_BASE_API = 'http://localhost:3000'

在.vue文件里可以使用 console.log(process.env.VUE_APP_BASE_API) 判断该环境是开发环境还是生产环境，从而选择接口地址url。

复制代码

	$axios( options ){

		let apiUrl = null;

		if( process.env.VUE_APP_ENV ==='dev' ){
			apiUrl = options.url;
		}else{
			apiUrl = process.env.VUE_APP_BASE_API + options.url;
		}
		return axios({
			url:apiUrl
		})
	}

三、使用node搭建后端项目

复制代码

全局命令：npm install express-generator -g

进入项目目录：express --view=ejs server

四、node-express跨域

复制代码

router.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});

五、安装可视化插件

复制代码

npm install webpack-bundle-analyzer

vue.config中配置

复制代码

        //引入可视化插件
		const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

		module.exports = {
			
			configureWebpack:config=>{
				config.plugins.push(
					new BundleAnalyzer()
				)
			}
		}

六、减少体积-productionSourceMap

别生成map文件

说明：map是方便代码运行的时候，可以准确输出代码到底是哪一行出现了错误。

复制代码

module.exports={
            
    //不生成map文件
    productionSourceMap:false
}

七、拆包--路由懒加载提升加载性能

说明：app.js是用来存放页面中的js操作的。例如：如果路由没有懒加载和分包，那么所有的路由全部会放在app.js文件中。

使用webpackChunkName在router/index.js文件在进行拆包

复制代码

 { 
    path: "/course",
    name: "Course",
    component: () => import(/* webpackChunkName:'course'*/ "../views/course/Course.vue")
},

八、减少体积-ui组件的按需引入

vendors.js：

说明：存放项目中的依赖。例如：vue.js、vue-router、vuex、axios、element-ui...

ui组件的按需引入：

根据不同的ui组件，使用按需引入，会让vendors.js文件的体积变小

九、减少体积-cdn引入包

可以把vue.js、router、vuex、axios...做成cdn引入。

注意：其实任何文件都可以做成cdn的形式，但是不建议ui组件做成cdn