介绍
这篇文章给大家分享的是有关Vue项目整合及优化的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>前言
使用webpack构建过Vue项目的同学应该知道别名的作用,我们可以使用它将复杂的文件路径定义成一个变量来访问。在不使用别名的项目中,我们引入文件的时候通常会去计算被引入文件对于引入它的文件的相对路径,比如像这样
import HelloWorld 得到& # 39;. ./. ./. ./. ./HelloWorld.vue& # 39; 一旦相对层次结构较深,我们就很难去定位所引入文件的具体位置,其实这并不是我们应该操心的地方,完全可以交给webpack来进行处理。在原生的webpack配置中我们可以定义别名来解决这一问题:
const path =,需要(& # 39;path & # 39;)
const resolve =, dir =祝辞,{
,return path.join (__dirname, dir)
}
module.exports =, {
,……
,
,解决:{
,别名:{
,& # 39;@ # 39;:,解决(& # 39;src # 39;),,//,定义,src 目录变量
,_lib:解决(& # 39;src/常见# 39;),,//,定义,common 目录变量,
,_com:解决(& # 39;src/组件,),,//,定义,components 目录变量,
,_img:解决(& # 39;src/图片# 39;),,//,定义,images 目录变量,
,_ser:解决(& # 39;src/服务# 39;),,//,定义,services 目录变量,
,}
},
,
,……
} 上方我们在webpack解决(解析)对象下配置别名的值,将常用的一些路径赋值给了我们自定义的变量,这样我们便可以将第一个例子简化为:
import HelloWorld 得到& # 39;_com/HelloWorld.vue& # 39; 而在CLI 3。x中我们无法直接操作webpack的配置文件,我们需要通过chainWebpack来进行间接修改,代码如下
/*, vue.config.js */module.exports =, {
,……
,
,chainWebpack: config =祝辞,{
,config.resolve.alias
,这里(& # 39;@ # 39;,,解决(& # 39;src # 39;))
,这里(& # 39;_lib& # 39;,,解决(& # 39;src/常见# 39;))
,这里(& # 39;_com& # 39;,,解决(& # 39;src/组件# 39;))
,这里(& # 39;_img& # 39;,,解决(& # 39;src/图片# 39;))
,这里(& # 39;_ser # 39;,,解决(& # 39;src/服务# 39;))
},
,
,……
} 这样我们修改webpack别名来简化路径的优化就实现了。但是需要注意的是对于在样式及html模板中引用路径的简写时,前面需要加上~符,否则路径解析会失败,如:
.img {
背景:大敌;(~ _img/home.png);
} <强>二、整合功能模块
在多页应用的构建中,由于存在多个入口文件,因此会出现重复书写相同入口配置的情况,这样对于后期的修改和维护都不是特别友好,需要修改所有入口文件的相同配置,比如在指数单页的入口中我们引用了VConsole及性能的配置,同时在Vue实例上还添加了美元openRouter方法:
import Vue 得到& # 39;Vue # 39;
import App 得到& # 39;。/index.vue& # 39;
import router 得到& # 39;。/路由器# 39;
import store 得到& # 39;@/商店/& # 39;
{},Navigator import 得到& # 39;. ./. ./常见# 39;//,如果是非线上环境,不加载,VConsole
if (process.env.NODE_ENV !==, & # 39;生产# 39;),{
,var VConsole =,要求(& # 39;vconsole/dist/vconsole.min.js& # 39;);
,var vConsole =, new VConsole ();=,Vue.config.performance 真实;
}
Vue openRouter 美元;=Vue.prototype。openRouter 美元;=,Navigator.openRouter;
Vue ({new
,路由器,
,商店,
,呈现:h =祝辞,h(应用)
})。美元山(& # 39;#应用# 39;) 而在page1所以page2和的入口文件中也同样进行了上述配置,那我们该如何整合这些重复代码,使其能够实现一次修改多处生效的功能呢?最简单的方法便是封装成一个共用方法来进行调用,这里我们可以在常见的文件夹下新建entryConfig文件夹用于放置入口文件中公共配置的封装,封装代码如下
import {, Navigator },得到& # 39;. ./指数# 39;
export default (Vue),=祝辞,{
,//如果是非线上环境,不加载,VConsole
,if (process.env.NODE_ENV !==, & # 39;生产# 39;),{
,var VConsole =,要求(& # 39;vconsole/dist/vconsole.min.js& # 39;);
,var vConsole =, new VConsole ();=,Vue.config.performance 真实;
,}
Vue。openRouter 美元;=,Vue.prototype openRouter 美元;=,Navigator.openRouter;
}
