Vue-Loader:为所有必需的.vue组件分配基-url

Question

我正在使用vue-加载程序作为应用程序。我希望尽可能地解耦我的组件，并且在这样的情况下，我想拥有这样的组件：

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“会导致以下错误：

未找到./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/CompanyName.Module/Views/Test/test.vue模块中的错误:错误:无法解析“文件”或“目录”C：\user1\user1 1\ 2015\Projects\CompanyName.Web.ClientSide\CompanyName.Module.Website\Scripts\src\CompanyName.Module\Views\TestCompanyName/Components/child.vue \Visual中的C：\user1\user1 1\2015\Projects\CompanyName.Web.ClientSide\CompanyName.Module.Website\Scripts\src\CompanyName.Module\Views\TestCompanyName/Components/child.vue\Visual工作室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-加载器没有将'./‘作为我的应用程序的基本路径(即'src')。我想让我的所有引用从同一个文件夹开始，以便在启动时定义它们，或者添加别名。是否有一种方法来配置webpack.config，以便当它遇到使用require() ?注入的依赖时，识别'./‘意味着'/src’

在过去的日子里，当使用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'
       }
   } 

}

Answer 1

您应该在@文件中使用webpack.conf.js别名，例如：

alias: {
      'vue$': 'vue/dist/vue.js',
      '@': resolve('src')
    }

然后，在include / require中，可以使用@直接指向vue/src文件夹：

include '@/components/Hello'  //This will point to ./src/components/Hello.vue

P.D = running webpack的意思是什么？如果您已经安装了带有vue-cli的vue，则应该使用npm run dev或npm run prod而不是webpack。

希望能帮上忙！