项目背景:
在我们的VUE大项目中,会包含若干个子项目,每逢公共配置JS脚本遭遇改动,就会导致每个子项目需要重新打包上线,这样会导致耗费大量的人力和时间成本。因此,就想着怎么解决这个问题,,于是就有了在打包后的index.html文件中单独引入配置JS脚本,这样问题就解决了。但是热更新时怎么动态引入呢,于是就有了下面的故事。
实践思路:
1、在项目的build/dev-server.js文件,修改静态资源的指向,这样就可以访问对应文件夹下面的所有静态资源了。热更新(npm run dev)启动后,通过 localhost:8080/ + "对应的静态资源文件名",就可以直接访问对应的静态资源。
2、在项目文件夹下的index.html文件中,引入对应的静态资源,就可以直接进入调试了。
代码改动:
1、build/dev-server.js文件
// serve pure static assets var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) //app.use(staticPath, express.static('./static')) app.use(staticPath, express.static(path.join(__dirname, '../../lib'))) var uri = 'http://localhost:' + port + '/index'
2、项目文件夹下的index.html文件
<script type="text/javascript" src="/public.js"></script> <!-- 仅用于热更新使用 -->