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

错误 ./~/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 \项目\ CompanyName.Web.ClientSide \ CompanyName.Module.Website \脚本\ SRC \ CompanyName.Module \视图\ TestCompanyName /组件/ child.vue 在C：\ Users \ user1 \ Documents \ Visual Studio中 2015年\项目\ CompanyName.Web.ClientSide \ CompanyName.Module.Website \ Scripts中的\ src \ CompanyName.Module \查看\测试 @ ./~/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中，您可以使用include '@/components/Hello' //This will point to ./src/components/Hello.vue直接指向您的vue / src文件夹：

running webpack

P.D =你对vue-cli的意思是什么？如果您使用npm run dev安装了vue，则应使用npm run prod或webpack代替typeof variable_name。

希望它有所帮助！

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

1 个答案: