Vue小技巧，如何導入普通JS文件

最近在開發一個展現3D模型的WEB程序，在工程中使用了VUE和ThreeJS庫。Three.js自己是支持CommonJS的，但咱們還用到了OBJLoader模塊，此模塊不支持CommonJS，改爲CommonJS比較麻煩（真相是懶綜合症發做）。這樣的話，只有用常規的html引入js文件的方式來解決這個問題。爲了闡述方便，本文使用一個簡單例子來展現整個解決方案。

這就本文所用到的例子工程，咱們在HelloWorld.vue中的mounted方法裏調用了外部引入的方法'testLib。

 

首先，咱們在項目目錄裏建立一個libs子目錄，在libs目錄中添加test.js文件。

 

而後打開build目錄下的webpack.dev.conf.js文件，找到CopyWebpackPlugin，按下圖所示增長一個copy動做，從..libs拷貝到與index.html的同一目錄下。對webpack.prod.conf.js也作以下修改。

 

運行npm run dev後，瀏覽器打開localhost:8080,你會發如今瀏覽器Console欄，‘this is test’被打印出來。

運行npm run build, test.js和index.html都放在了dist目錄下。

 

這個設置其實不止在VUE下有用，在其餘以webpack爲模板的工程中均可以使用。