如何更改网站内容(vue-cli4.js修改其import路径为绝对路径-)

　　如何更改网站内容(vue-cli4.js修改其import路径为绝对路径-)

　　前言

　　有时候我们在npm上使用这个包，发现bug，知道怎么修改，但是别人可能一时无法更新，或者我们有特殊需要别人不愿意修改。这个时候，我们只能自己动手了。那么我们应该如何修改别人的源代码呢？首先，直接修改node_modules中的文件是不行的，重装之后依赖就没了。常用的方法有两种：

　　把别人的代码下载到本地，放到src目录下，修改后手动导入。fork别人的代码到自己的仓库，修改后从自己的仓库安装这个插件。

　　这两种方式的缺点是更新比较麻烦，每次都需要手动更新代码，无法和插件同步更新。如果我们要修改的代码只是别人的一个小模块，而其他大部分代码保持不变，这时候就有一个非常投机的操作：使用webpack别名来覆盖别人的代码。

　　webpack别名的作用

　　webpack alias 一般用来配置路径别名，这样我们就可以少写路径代码：

　　chainWebpack: config => {

config.resolve.alias

.set('@', resolve('src'))

.set('#', resolve('src/views/page1'))

.set('&', resolve('src/views/page2'));

},

复制代码

　　也就是说，webpack alias 会代替我们写的“简写路径”，对node_modules中的文件也有效。这时候我们可以用自己的文件替换别人源代码中引用模块的路径。

　　具体操作如下：

　　在别人的源码中找到需要修改的模块，复制代码到src目录修改bug，注意里面引用的其他文件需要写成绝对路径才能找到这个模块所在的路径引入（我们需要截取的路径）一次配置webpack别名的实际操作

　　以qiankun框架的patchers模块为例：

　　文件被引用的路径是：./patchers（我们要截取的路径）

　　该文件的内容是：

　　将内容复制到src/assets/patchers.js，将其导入路径修改为绝对路径，并添加我们的代码：

　　配置webpack别名（我使用的是vue-cli4，配置文件是vue.config.js）：

　　const path = require('path');

module.exports = {

chainWebpack: config => {

config.resolve.alias

.set('./patchers', path.resolve(__dirname, 'src/assets/patchers.js'))

}

};

复制代码

　　运行代码，控制台打印成功，说明我们已经成功覆盖了别人的代码，当别人的代码更新时，我们也可以同时更新，但是这个模块的代码使用了我们自定义的。也可以打包后使用。

　　补充：使用patch-package修改

　　根据朋友@Leemagination的指导，使用patch-package修改node_modules中的文件比较方便

　　步骤也很简单：

　　安装patch-package：npm i patch-package --save-dev 修改package.json，添加postinstall命令：

　　"scripts": {

+ "postinstall": "patch-package"

}

复制代码

　　修改node_modules中的代码，执行命令：npx patch-package qiankun。

　　第一次使用patch-package，会在项目根目录下生成一个patch文件夹，里面收录修改后的文件diff记录。

　　包版本更新后，执行命令：git apply --ignore-whitespace patch/qiankun+2.0.11.patch。其中qiankun+2.0.11.patch就是它生成的文件名。

　　结尾

　　这种方法虽然是推测性的，有很多局限性，但也非常有用。技术需要不断探索。有任何问题或错误欢迎指出！