Vue基础学习的项目整合与优化

前言

使用webpack构建Vue项目的学生应该知道别名的作用，别名可以用来将复杂的文件路径定义为要访问的变量。在不使用alias的项目中，当我们导入文件时，我们通常会计算导入文件到导入文件的相对路径，如下所示

从'导入helloworld././././helloworld.vue '一旦相对层次很深，我们就很难定位导入文件的具体位置。其实这不是我们应该担心的事情，可以通过webpack来处理。在本机webpack配置中，我们可以定义别名来解决这个问题：

const path=require(' path ')const resolve=Dir={ return path . join(_ dirname，Dir)} module . exports={ 0.resolve 3360 { alias : { ' @ ' 3360 resolve(' src ')，//定义src目录变量_ lib3360resolve ('src/common ')，//定义公共目录变量，_ com : resolve(' src/components ')，//定义组件目录变量，_ img3360resolve ('src/images ')，//定义images目录变量，_ser: resolve('src/services ')，//定义服务目录变量，}，}以上，我们在webpack resolve对象下配置alias的值，并为我们的自定义变量分配一些常用路径，这样我们就可以将第一个示例简化如下：

从' _ com/helloworld.vue '导入helloworld，但在CLI 3.x中，我们无法直接操作webpack的配置文件，需要通过chainWebpack间接修改。代码如下

/* vue . config . js */module . exports={ 0.chainwebpack k : config={ config . resolve . alias。set('@ '，resolve('src '))。set('_lib '，Set ('_ com '，resolve ('src/components '))。设置(' _ img '，解析(' src/images ')。set ('_ ser '，resolve ('src/services ')但是，应该注意的是，在引用样式和html模板中的路径缩写时，应该在它们之前添加~符号，否则路径解析会失败，例如：img { background :(~ _ img/home . png)；}二。功能模块集成

在多页应用的构建中，由于存在多个入口文件，相同的入口配置会被重复编写，对于后期的修改和维护不是特别友好。有必要修改所有条目文件的相同配置。例如，在索引单页的条目中，我们参考了VConsole的配置和性能，同时在Vue实例中添加了$openRouter方法：

从“vue”导入vue，从“导入应用程序”。/index.vue“从导入路由器”。/路由器“从”@/store导入存储区/“从”{navigator}导入”././common '//如果是脱机环境，请不要加载vconsolief(process . env . node _ env！==' production '){ var VConsole=require(' VConsole/dist/VConsole . min . js ')；var vConsole=new vConsole()；vue . config . performance=true；}Vue。$ OpenRouter=Vue . prototype . $ OpenRouter=navigator . OpenRouter；new vue({路由器，商店，render:h=h (app)})。$ mount(“# app”)也在第1页和第2页的条目文件中如上配置。如何将这些重码整合起来，使其实现一次修改多个地方的功能？最简单的方法就是把它打包成一个普通的方法来调用它。在这里，我们可以在公共文件夹下创建一个新的entryConfig文件夹，将公共配置的包放在条目文件中。包代码如下

从导入{导航器}./index ' export default(vue)={//如果是脱机环境，不要加载vconsif(process . env . node _ env！==' production '){ var VConsole=require(' VConsole/dist/VConsole . min . js ')；var vConsole=new vConsole()；vue . config . performance=true；} Vue。$ OpenRouter=Vue . prototype . $ OpenRouter=navigator . OpenRouter；}我们在上面的代码中公开了一个函数。我们可以通过将Vue实例作为参数传递给调用它的入口文件来共享内部函数。我们可以将原始条目文件简化为：

从“vue”导入Vue从“App”导入。/index.vue“从导入路由器”。/router ' import store from ' @/store/' import entryConfig from ' _ lib/entryConfig///调用public方法加载配置entryconfig (vue) newvue ({router，store，render:h=h (app)})。$ mount ('# app') 3。打开Gzip压缩

/* vue . config . js */const ISpro=process . ENV . NODE _ ENV==' production ' module . exports={ 0.configurewebpack : config={ if(isPro){ return { plugins :[new compresswebpackplugin({//目标文件名。[路径]被原始文件的路径替换，并且[查询]查询asset:路径]。gz [query]'，//用gzip压缩algorithm:' gzip '，//处理所有文件test3360new regexp ('\ \。(js|css)$ ')，//仅处理大于此大小阈值： 10240的文件，//当最小压缩比达到0.8时将被压缩。})]}}} .}在顶部，我们在生产环境中添加了Gzip压缩配置，以输出带后缀的文件。包装后的gz。因为我们的配置项只压缩大小超过10240B(10kB)的JS和CSS，不符合要求的文件不会被Gzip压缩。

Gzip压缩可以在普通压缩的基础上压缩50%以上。我们可以直接看控制台的输出对比图

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。