Vue-cli: webpack模板如何在开发环境下引入外部js？

Created on 20 Feb 2016 · 9Comments · Source: vuejs/vue-cli

webpack 模板，我需要在html引入外部的js作为公共的库提供，但发现无论我怎么设置路径，开发模式下始终找不到引入的文件。例如下面这个

  <body>
    <app></app>
    <script src="./lib/qrcode.min.js"></script>
  </body>

但是如果用webpack-dev-server，就可以找到相应的目录

Source

agileago

Most helpful comment

相对路径的文件，为什么不直接在 main.js 里面 import?

yyx990803 on 20 Feb 2016

👍10

All 9 comments

相对路径的文件，为什么不直接在 main.js 里面 import?

yyx990803 on 20 Feb 2016

👍10

是这样的，项目中有一些配置文件(比如配置这个页面上各个接口需要访问的域名、功能开关等)需要单独抽出来在页面上引进来，这样修改配置的时候直接改这个config文件即可，而不需要重新编译生成，另外还有一些第三方插件没有遵守模块化得写法，没办法通过import引进来，比如上面的qrcode这个库，他的代码是这样写的

var QRCode;
....blabla

尽管可以通过某些loader可以引入到模块化系统中，但总觉得有点繁琐，我只有这个页面有这个东西，
想通过webpack的external配置，配置一下外部变量就行了，就是说项目中有时候并不是所有的文件都要纳入到webpack这个系统中，需要保持最大的灵活性

agileago on 20 Feb 2016

在 entry 里面加一个也可以啊

yyx990803 on 21 Feb 2016

🤔

agileago on 21 Feb 2016

我是不是可以这样理解，最佳实践就是

模块化的话就彻底模块化
页面的js全部交给打包工具处理
非模块化的库想方设法也要模块化

agileago on 21 Feb 2016

用统一的构建机制肯定好过混合的。
对于那种 var xxx 的文件，用这个：http://webpack.github.io/docs/shimming-modules.html#exporting
你可以把所有非模块的第三方依赖文件做成一个分开的 entry，这样它们和你的应用代码是分开的，最后生成的 hash 变化少，有利于 cache。

yyx990803 on 21 Feb 2016

👍9

@yyx990803 @agileago 确实独立配置一份文件，这方面的需求还是挺大的。特别是开发的时候dev, test, stg, pro各种环境，有时候只需要打一次包，然后配置更改配置文件的值即可！不过这个貌似不是vue-cli做的事情，可能交给template比较好，然后各种环境配置，项目build的时候可选择的生成独立可配置文件，并引入！