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

Question

我正在为应用程序使用 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 Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\user1\Documents\Visual Studio 2015\Projects\CompanyName.Web.ClientSide\CompanyName.Module.Website\Scripts\src\CompanyName.Module\Views\TestCompanyName/Components/child.vue in 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'
       }
   } 

}

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.

希望对您有所帮助！

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

Vue-Loader: Assigning base-url for all required .vue components

require

webpack

vue.js

vue-loader