vite中解构导出或有bug?

  • Z时代
  • 2024-02-24
  • 分类：IT

vite中解构导出或有bug?

不使用解构输出

import api from '@/api'
console.log(api.login) // function() {}

使用解构输出

import {login} from '@/api'
console.log(login) // vue-router.esm-bundler.js:3302 SyntaxError: The requested module 
import request from '../utils/request'
export default {
  login(params) { // 登录
    return request({
      url: '/users/login',
      ...params
    })
  }
}
  • 现在的情况是，可以导入这个对象，通过对象的使用 login 函数
  • 如果在导入的时候进行解构则报错，请问这是什么原因？
  • 申明，别名已配置好

回答：

这不是 bug。你可以去了解下 CommonJS 和 ESM 的导出有何异同，我们以前写代码的时候，很多时候会混用，反正 Babel 会帮我们转译，然后打包到一起也不需要区分；Vite 需要用到浏览器 ESM，所以要严格遵守 ESM 规范。

关于导出方式，请参考 MDN。

回答：

因为你导出的不对
像下面这样导出
commonjs规范

const request = require('../utils/request').default;
module.exports = {
  login(params) { // 登录
    return request({
      url: '/users/login',
      ...params
    })
  }
}

下面3种写法是es规范

import request from '../utils/request';
export function login(params){
    return request({
      url: '/users/login',
      ...params
    })
}
import request from '../utils/request';
export const login = (params) => {
    return request({
      url: '/users/login',
      ...params
    })
}
import request from '../utils/request';
function login(params){
    return request({
      url: '/users/login',
      ...params
    })
}
export { login };

然后用的时候就可以这样

import * as api from '@/api'
console.log(api.login)

或这样

import {login} from '@/api'
console.log(login)

使用

回答：

import request from '../utils/request'
- export default {
+ export {
  login(params) { // 登录
    return request({
      url: '/users/login',
      ...params
    })
  }
}

以上是 vite中解构导出或有bug? 的全部内容， 来源链接： utcz.com/p/937191.html

回到顶部