Vue和Webpack中的动态导入路径 [英] Dynamic import paths in Vue and Webpack

问题描述

我正在VueJS 2(和Vue-CLI 3)中创建一个前端项目，该项目将由不同的客户端使用，并且我希望能够基本导入我需要的所有内容(如mixin，组件代码和CSS之类的JS文件)/LESS文件)在webpack构建过程中根据将存储在以下位置的CID参数化: 1)Vue .env文件或 2)在webpack配置文件中的某个位置或 3)作为参数传递给npm run watch和npm run build.

I'm creating a frontend project in VueJS 2 (and Vue-CLI 3) that will be used by different clients and I would like to be able to import basically everything I need (JS files like mixins and component code and CSS/LESS files) during the webpack build process parametrically based on the CID that would be stored in: 1) the Vue .env file or 2) somewhere in the webpack config file or 3) passed as a parameter to npm run watch and npm run build.

我搜索了许多解决方案(Webpack插件等)，但是它们都不是简单或优雅的，我也无法真正理解Webpack来实现这些解决方案的内部原理，并且大多数与动态加载无关.动态构建过程.

I've searched about many solutions (Webpack plugins etc.) but none of them are simple or elegant nor am I really able to understand the inner workings of the Webpack to implement those solutions and most are related to the dynamic loading not the dynamic build process.

不同的客户端需要不同的代码和样式，例如:

Different clients require different code and styling so for example:

<template>...</template>
<script src="./component-code.js"></script>
<style src="@/styles/component-style.less"></style>

这些路径将需要转变为以下形式:

These paths would need to turn into something along these lines:

<template>...</template>
<script src="./CLIENTID/component-code.js"></script>
<style src="@/styles/CLIENTID/component-style.less"></style>

...以便在使用真实文件夹名称进行编译时，Webpack可以替换这些CLIENTID引用，无论使用哪种名称.这也必须适用于任何其他文件路径(例如，使用诸如import something from "./path/CLIENTID/to/file";之类的语句时).

...so that the Webpack can replace these CLIENTID references when compiling with real folder names whatever those may be. This would also have to work for any other file paths (e.g. when using statements like import something from "./path/CLIENTID/to/file";).

将这样的变量注入到构建过程中最简单的解决方案是什么?谢谢！

What would be the easiest solution to injecting such a variable into the build process? Thanks!

推荐答案

作为一种选择，可以使用别名和体系结构规则的组合来实现所需的功能.

As one option, it is possible to use combination of aliases and architectural rules in order to achieve requested functionality.

1)在环境变量中传递CLIENTID或从任何自定义配置文件中将其导出.由于提到了CI，因此我们建议使用process.env.

1) Pass CLIENTID through an environmental variable or export it from any custom config file. Since CI is mentioned, let's suggest process.env is used.

2)为应该可用于导入的所有相关路径创建别名.可以在vue.config.js(如果是@vue/cli 3.0+)或Webpack配置文件中完成.

2) Create aliases for all relevant paths that should be available for imports. It can be done in vue.config.js (in case of @vue/cli 3.0+) or inside a webpack config file.

上述路径的示例:

'~styles': `src/styles/${process.env.CLIENTID}`
'~components': `src/components/${process.env.CLIENTID}`
'~something': `src/something/${process.env.CLIENTID}`

3)更改项目结构以将客户端特定组件包含在单独的文件夹中，同时通过默认路径保持共享代码可用.

3) Change project structure to contain client specific component's into separate folders, while keeping shared code available via default paths.

4)使用别名，它将解析正确的路径:

4) Use aliases, that will resolve correct paths:

import CustomButton from '~components/custom-button.vue'

如果您计划为不同的客户提供多个版本，那么将项目体系结构重构为将每个CLIENTID的所有相关资产都拆分开的东西可能会很有用，例如:

If you have a plan to bring many versions for different clients, it may be useful to refactor project architecture to something that will split all relevant assets for each CLIENTID, e.g.:

project |
        |-- common     |
        |              |--styles
        |              |--components
        |               
        |--CLIENTID_1  |
        |              |--styles
        |              |--components
        |
        |--CLIENTID_2  |
                       |--styles
                       |--components

通过这种方式，别名可以更方便地声明和使用:

This way aliases will be event more convenient to declare and use:

'~common': `src/common`
'~client': `src/${process.env.CLIENTID}`  

import CommonButton from '~common/components/common-button.vue'
import CustomButton from '~client/components/custom-button.vue'

这篇关于Vue和Webpack中的动态导入路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！