Vue和Webpack中的动态导入路径

时间:2018-12-03 23:06:35

标签: vue.js webpack build environment-variables

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

我已经搜索了许多解决方案(Webpack插件等),但是它们都不是简单或优雅的,我也不是真的能够理解Webpack实施这些解决方案的内部工作原理,并且大多数与动态加载无关。动态构建过程。

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

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

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

<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";之类的语句时)。

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

1 个答案:

答案 0 :(得分:3)

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

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

2)为应该可用于导入的所有相关路径创建别名。可以在vue.config.js(如果使用@vue/cli 3.0以上版本)或webpack配置文件中完成此操作。

上述路径的示例:

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

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

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

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

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

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

这样,别名将更易于声明和使用:

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

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