vuejs app.js 导入路径可以是动态的还是 if else 条件下？

Question

应用程序.js

原创

import x from 'project/a'

可以吗

var project = 'a'

if(project == 'a')
{
   import x from 'project/a'
}
else
{
   import x from 'project/b'
}

或者可以用吗

var project = 'a'
var filepath = '';

if(project == 'a')
{
   filepath = 'project/a';
}
else
{
   filepath = 'project/b';
}

import x from filepath

Answer 1

您可以：

导入两者并执行条件

想象一个包含项目 A 和项目 B 代码以及条件的文件。

import initProjectA
import initProjectB

if (condition) {
  initProjectA()
} else {
  initProjectB()
}

这将被编译成如下内容：

function initProjectA() {
}

function initProjectB() {
}

if (condition) {
  //
}

动态导入：

这将生成 3 个独立的文件：projectA、projectB、conditional。

import(module).then(importedModule => {
  importedModule.default() // assuming you did `export default`
})

条件文件只会加载其中一个然后执行它。

• 检查是否应该下载projectA或projectB
• 文件下载后，执行它

您可能需要更改一些配置才能进行动态导入。你可以在Google上搜索“webpack动态导入”主题。

Answer 2

您可以执行以下操作：

var project = 'a'

let x;

if(project == 'a')
{
   x = require('project/a').default;
}
else
{
   x = require('project/b').default;
}

假设您在导入的文件中使用导出默认值