我正在将 vue-loader 用于应用程序。我想尽可能地解耦我的组件,并且有一种情况我想要这样的组件:
测试.vue
<template>
<div>
Testing My Vue
<child></child>
</div>
<script>
export default {
data () {
return {}
},
beforeCreate(){
var child = require("./CompanyName/Components/child.vue");
Vue.component("child",child);
}
}
</script>
请注意以下行
var child = require("./CompanyName/Components/child.vue");
孩子.vue
<template>
<div>This is my Child component</div>
</template>
<script>
export default {
data () {
return {};
}
}
</script>
在我的应用程序上运行“webpack”会导致以下错误:
./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/CompanyName.Module/Views/Test/test.vue 中的错误模块未找到: 错误:无法解析“文件”或“目录”C:\Users\user1\Documents\Visual Studio 2015\Projects\CompanyName.Web.ClientSide\CompanyName.Module.Website\Scripts\src\CompanyName.Module\Views\TestCompanyName /Components/child.vue 在 C:\Users\user1\Documents\Visual Studio 2015\Projects\CompanyName.Web.ClientSide\CompanyName.Module.Website\Scripts\src\CompanyName.Module\Views\Test @ ./~/ babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/CompanyName.Module/Views/Test/test.vue 23:16-70
似乎 vue-loader 没有将“./”识别为我的应用程序的基本路径(即“src”)。我想让我的所有引用都从同一个文件夹开始,以便我在启动时定义它们,并可能添加别名。 有没有办法配置 webpack.config 以便在遇到使用 require() 注入的依赖项时识别 './' 表示 '/src' ?
这曾经在过去使用 require.js 时被处理过
//the old days
requirejs.config({
baseUrl:'./src'
})
我的 Webpack.config
var path = require('path');
module.exports = {
entry: "./src/main.js",
output: {
path: '../Dist',
publicPath: '../Dist/',
filename: 'build.js'
},
resolve: {
alias: {
'vue': 'vue/dist/vue.js',
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
}
],
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
},
{
test: /\.vue$/,
loader: 'vue',
}
]
},
devtool: "#source-map",
vue: {
loaders: {
js: 'babel'
}
}
}