Vue項目中使用了annotorious插件晚缩，根據(jù)需要修改源碼苏潜，但是修改過后的js文件無法通過import形式引入，糾結(jié)了好幾天返顺，現(xiàn)在把解決方案記錄一下。
項目技術點
- vue 2.0
- webpack 1.0
場景還原
最開始的寫法是這樣的蔓肯，項目運行正常
import 'annotorious-bower/annotorious.min.js';
修改源碼后遂鹊，js 文件放到了一個自定義的文件夾下 src/assets/js , 使用下面的方式引入 js
import '../../src/assets/js/annotorious.min.js';
運行項目，報錯
27.png
小錯誤蔗包，這都不是事兒秉扑，然后這個問題糾結(jié)了三天 ...
解決方案
使用 exports-loader script-loader 搞定，先安裝
npm i -D exports-loader script-loader
在 webpack.base.conf.js 中添加配置
...
module: {
loaders: [
{
test: require.resolve('../src/assets/js/annotorious.min.js'),
loader: 'exports-loader?window.anno!script-loader'
}
]
}
...
在 .vue 文件中引入文件修改為下面的方式
require("exports?window.anno!../../src/assets/js/annotorious.min.js");
window.anno js文件中返回的全局變量
執(zhí)行到這一步就沒問題了 调限。
-- end --
