首页 文章

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

提问于
浏览
0

我正在使用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 回答

  • 0

    您应该在 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 devnpm run prod 而不是 webpack .

    希望能帮助到你!

相关问题