0

我正在将 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'
       }
   } 

}
4

1 回答 1

0

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

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

然后,在您的 include / require 中,您可以使用@to 直接指向您的 vue/src 文件夹:

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

PD = 你的意思是running webpack什么?如果你已经安装了 vue,vue-cli你应该使用npm run devornpm run prod而不是webpack.

希望能帮助到你!

于 2017-10-26T14:33:53.093 回答