在使用 httpVueLoader 加载的 .vue 组件中导入 js 文件答案

【问题标题】：import js file inside .vue component loaded using httpVueLoader在使用 httpVueLoader 加载的 .vue 组件中导入 js 文件
【发布时间】：2020-06-11 10:53:55
【问题描述】：

我不想在我的 vue 开发中使用 webpak，所以有2个选择将组件编写为 .js 文件或将它们写为 .vue 文件并使用 httpVueLaoder 加载组件，就像它们是 .js 文件一样与 httpvueLoader 一起思考直到我想在我的组件中使用 API 那我无法获得API 我有一个 Home.vue 组件，里面有一个 FormLot.vue 组件，尝试导入 API.js

<script>
let FormLot = window.httpVueLoader('./frontEnd/page/lot/FormLot.vue')
module.exports = {
    name:"Home",
     components: {FormLot:FormLot},
...    
};
</script>

在 FormLot.vue 中

// _END_ is the absolut path to the site , soi can change it later
let API = import(_END_+'/api/api.js') // dont work return promise
import API from './frontEnd/api/api.js' // dont work componnet dont show at all :(

 let FormLotE1 = window.httpVueLoader(_END_+'/page/lot/FormLotE1.vue')

module.exports ={
    ...
};
</script>

API.JS

module.exports ={
   ...
};

API.JS

export default {
   ...
};

我尝试使用 API.js 导出默认值和 module.export 都不起作用注释使用 webpack API.js 时正常导入并正常工作

【问题讨论】：

你是如何尝试export default的？
在阅读有关 httpvueLoader 时，他们说导出默认值在 .vue 文件中不起作用，所以我们必须将其更改为 module.exports =，当我导入 .js 时，.vue 文件就是这样文件不起作用我猜是因为我的 API.js 使用了导出默认值，所以我将其更改为 module.exports

标签： vue.js

【解决方案1】：

从路径 httpVueLaoder 使用导入 API 时不起作用所以我试着做

const API= import(path)

问题女巫，API 是承诺，不能使用 :( 即使使用 await 也不能解决问题

const API = (async ()=> await import(path))()

我的解决方案仍然是使用 await 调用导入，但不在脚本顶部我在mounted()函数中调用它

async mounted(){

                     API = (await import(_END_+'/api/api.js')).default

    },

注意你必须使用 .default 因为 import 返回一个模块 :) 在此输入代码

【讨论】：