Question

我有一个VueJS 2应用程序，我正在尝试根据配置JSON文件中的不同标志加载特定组件。

我的文件结构如下：

root
  config.json
  > src
  >> client
  >>> components
  >>>> dashboard
  >>>>> MenuBarBrand.vue
  > product
  >> product01
  >>> client
  >>>> components
  >>>>> branding
  >>>>>> MenuBrand.vue
  >> product02
  >>> client
  >>>> components
  >>>>> branding
  >>>>>> MenuBrand.vue

目前我尝试了两种不同的方法：

在MenuBarBrand组件中使用webpack导入语法：

<template>
    <b-navbar-brand href="/dashboard">
        <MenuBrand />
    </b-navbar-brand>
</template>

<script>
import config from '../../../../config.json';
const MenuBrand = import(`../../../../product/${config.product}/components/branding/MenuBrand`); 

export default {
    name: 'MenuBarBrand',
    components: {
         'MenuBrand',
    },
}
</script>

导致以下错误：

或Vue Async Components本地注册语法：

<template>
    <b-navbar-brand href="/dashboard">
        <MenuBrand />
    </b-navbar-brand>
</template>

<script>
import config from '../../../../config.json';

export default {
    name: 'MenuBarBrand',
    components: {
        'MenuBrand': () => import(`../../../../product/${config.product}/components/branding/MenuBrand`)
    },
}
</script>

导致以下错误：

我是否有任何明显错误，或者是否需要启用此功能的特定babel / webpack插件？

编辑：根据我收到的评论添加我的加载程序配置：

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    scss: [
                        'vue-style-loader',
                        'css-loader',
                        'sass-loader',
                    ],
                    sass: [
                        'vue-style-loader',
                        'css-loader',
                        'sass-loader?indentedSyntax',
                    ],
                },
            },
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]',
            },
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader',
        },
        {
            test: /\.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
            loader: 'file-loader?name=fonts/[name].[ext]',
        },
    ],
},

Answer 1

我通过另一种方法解决了这个问题。

在webpack配置中，我拉入产品标记并创建路径：

num1 = int(code1)
num2 = int(code2)
rnd = randint(min(num1,num2), max(num1,num2))
print(rnd)

然后我使用以下路径在webpack配置中设置别名：

const config = require('./config.json');
const fs = require('fs');
const path = require('path');

const productPath = path.resolve(__dirname, 'product', config.product);

然后在我的Vue组件中使用此路径导入适当的组件：

resolve: {
    alias: {
        menuBrandingPath: productPath,
    },
    extensions: ['*', '.js', '.vue', '.json'],
},

我故意忘记使用fs进行错误检查，以及我用来使这个示例更容易理解的回退路径。希望它可以帮助某人！：）

Answer 2

您需要使用vue-loader webpack插件来处理webpack设置中的.vue文件。这会启用() => import(...)语法。

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        (other loaders....)
    ]
},

或者，在原始示例中使用require：

<template>
    <b-navbar-brand href="/dashboard">
        <MenuBrand />
    </b-navbar-brand>
</template>

<script>
import config from '../../../../config.json';
const MenuBrand = require(`../../../../product/${config.product}/components/branding/MenuBrand`); 

export default {
    name: 'MenuBarBrand',
    components: {
         'MenuBrand',
    },
}
</script>

Vue Async导入Webpack

2 个答案: