我正在使用vue-loader作为应用程序 . 我想尽可能地分离我的组件,并且我希望有一个像这样的组件的情况:
Test.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");
Child.vue
<template>
<div>This is my Child component</div>
</template>
<script>
export default {
data () {
return {};
}
}
</script>
在我的应用程序上运行“webpack”会导致以下错误:
ERROR in ./~/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 \ C:\ Users \ user1 \ Documents \ Visual Studio 2015 \ Projects \ CompanyName.Web.ClientSide \ CompanyName.Module.Website \ Scripts \ src \ CompanyName.Module \ Views \ Test @ ./~中的TestCompanyName / Components / child.vue /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') . 我希望我的所有引用都从同一个文件夹开始,以便我在启动时定义它们并可能添加别名 . Is there a way to configure webpack.config so that it recognizes that './' means '/src' whenever it meets a dependency injected using require() ?
过去曾经在使用require.js时处理过
//the old days
requirejs.config({
baseUrl:'./src'
})
My 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'
}
}
}
1 回答
您应该在
webpack.conf.js
文件中使用@
别名,例如:然后,在include / require中,您可以使用
@
直接指向您的vue / src文件夹:P.D =你的意思
running webpack
?如果您使用vue-cli
安装了vue,则应使用npm run dev
或npm run prod
而不是webpack
.希望能帮助到你!