0
我正在尝试使用用Webpack编译的VueJS项目的Handsontable seets组件。但是我得到'无法找到模块numbro'错误,即使我不在模块中导入numbro,也会发生这种错误。我照着下面使用使用Handsontable的Javascript项目在导入时找不到模块
npm install
的package.json中的package.json安装的所有软件包:
"dependencies": {
"vue": "^2.1.10",
"handsontable": "^0.31.1",
"moment": "^2.18.1",
"numbro": "^1.10.1",
"pikaday": "^1.5.1",
"vue-handsontable": "^0.0.2",
"zeroclipboard": "^2.3.0"
},
如此地:https://github.com/handsontable/handsontable/issues/3407我加Handsontable的四个依赖关系的模块装载机节webpack配置文件。
webpack.config.js
module: {
loaders: [
{
test: require.resolve('numbro'),
loader: 'expose?numbro'
},
{
test: require.resolve('moment'),
loader: 'expose?moment'
},
{
test: require.resolve('pikaday'),
loader: 'expose?Pikaday'
},
{
test: require.resolve('zeroclipboard'),
loader: 'expose?ZeroClipboard'
}]
TableView.vue
<template>
<div id="hot-preview">
<cool-table :data="data" :settings="{}"></cool-table>
</div>
</div>
</template>
<script>
import moment from 'moment'
import numbro from 'numbro'
import pikaday from 'pikaday'
import Zeroclipboard from 'zeroclipboard'
import Handsontable from 'handsontable'
import CoolTable from 'vue-handsontable'
export default {
name: 'TablesView',
data() {
return {
data: [
['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
['2008', 10, 11, 12, 13],
['2009', 20, 11, 14, 13],
['2010', 30, 15, 12, 13]
]
}
},
components: {
CoolTable
}
}
</script>
当我编译和运行我的VueJS项目,我得到一个控制台错误:
Error: Cannot find module 'numbro'
我可以看到在node_modules文件夹中带有numbro.js的numbro文件夹。任何想法可能会出错?
检查Chrome浏览器开发工具的网络标签在页面加载。你看到404吗?如果是这样,这个问题很可能是服务于这个文件。否则,问题在于您在用户界面中的引用可能不正确地引用。 –
@JohnVandivier这不是一个404错误,与我认为的webpack构建设置有关。 –