导入axios导致vue v3和vite出现问题

yh2wf1be  于 2023-11-18  发布在  iOS
关注(0)|答案(6)|浏览(173)

从“axios”导入axios;
结果在vite投掷
未捕获语法错误:未找到导入:默认值
示例代码

  1. import { createApp } from 'vue';
  2. import TheContainer from './components/TheContainer.vue';
  3. import axios from 'axios';
  4. axios.defaults.baseURL = process.env.VUE_APP_API_URL;
  5. const app = createApp({
  6. components: {
  7. TheContainer
  8. }
  9. })
  10. app.axios = axios;
  11. app.$http = axios;
  12. app.config.globalProperties.axios = axios;
  13. app.config.globalProperties.$http = axios;
  14. app.mount('#app');

使用axios 0.21.1和vue 3.0.5
试图找出问题所在. vuejs v3 cookbook遗憾地通过cdn调用axios 0.14代码

4urapxun

4urapxun1#

Redaxios是axios的现代重制版。

  1. import axios from 'redaxios';
  2. // use as you would normally

字符串
这解决了我的问题与vite和axios。工程在webpack太多。

xwbd5t1u

xwbd5t1u2#

你应该安装一个axios的es模块:
删除当前版本:

  1. npm uninstall axios

字符串
然后运行:

  1. npm install @bundled-es-modules/axios --save


然后像这样使用它:

  1. import { createApp } from 'vue';
  2. import TheContainer from './components/TheContainer.vue';
  3. import axios from 'axios/axios.js';
  4. //create an axios instance in order to use it globally with same config
  5. const instance = axios.create({
  6. baseURL: process.env.VUE_APP_API_URL,
  7. withCredentials: false,
  8. headers: {
  9. Accept: 'application/json',
  10. 'Content-Type': 'application/json',
  11. },
  12. })
  13. const app = createApp({
  14. components: {
  15. TheContainer
  16. }
  17. })
  18. app.config.globalProperties.axios = instance;
  19. app.mount('#app');

展开查看全部
kdfy810k

kdfy810k3#

问题出在Vite 2.x
issue #174issue 162表明,vite更愿意处理适当的ESM模块,而不是在自己内部修复它们(公平调用)。
因此,从vite 2.0.0-beta50开始,我将使用fetch and discovering vue-auth来构建它(无论如何,这对于vue v3来说看起来非常复杂)。
编辑:我从来没有得到这个底部,但因为我是在Laravel内的宅基地/Vagrant中构建这个-我发现将它完全从该环境中取出似乎可以解决问题..我还注意到Vite并不总是注意到宅基地/Laravel环境中的代码更改-所以它可能是缓存或其他东西.无论如何,我将它取出,一切正常

inb24sb2

inb24sb24#

所以,这个问题只是花了我一些时间来解决,我想分享我的经验,希望它能帮助别人。
虽然,这个答案中的一些解决方案有助于解决最初的问题,但我还有其他问题进一步沿着。例如,当我安装redaxios时,我注意到它没有在请求头中发送X-XSRF-TOKEN(我的后端服务Laravel Sanctum需要)。
最后,真正解决我问题的是简单地删除node_modules目录并重新安装(yarn)。我认为vite有一个已安装目录的缓存版本,无论我重新安装axios或在包之间切换多少次,它都会显示一些错误。

xfb7svmp

xfb7svmp5#

你应该安装这个vite plugin @originjs/vite-plugin-commonjs。

  1. npm install @originjs/vite-plugin-commonjs --save-dev

字符串
将插件添加到您的vite.config.ts,您就可以开始了。

  1. import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
  2. export default {
  3. plugins: [
  4. viteCommonjs()
  5. ]
  6. }


仅此而已

展开查看全部
6ovsh4lw

6ovsh4lw6#

  1. import { createApp } from 'vue'
  2. import router from './adminroutes'
  3. import axios from 'axios'
  4. window.axios = axios
  5. window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
  6. window.axios.defaults.withCredentials = true
  7. const app = createApp({})
  8. app.use(router)
  9. app.mount('#adminapp')

字符串

相关问题