我的 Vue NPM 导入只能在 src 文件夹中而不是项目根目录中找到模块

Question

In my app root, I have /node_modules/ and /src/

I have ran npm install and installed packages using npm install axios --save etc for all my dependencies I do see that they are being added to the node_modules directory however my vue project does not compile with the following error:

Failed to compile.

./src/main.js
Module not found: Error: Can't resolve 'axios' in '/app/src'

If I manually create a node_modules folder inside of my /src/ directory, and place axios, and my other dependencies it works.. but from what I've read I should not be handling my node modules this way. It seems I need to have my dependencies point to a different path?

What's weird is my import Vue from 'vue' and App from './App.vue' work fine, it's basically everything afterwards that fails to compile..

My main.js:

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import firebase from 'firebase'
import "firebase/auth";
import "firebase/analytics";
import "firebase/firestore";
import moment from 'moment'

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  firebase: firebase,
}).$mount('#app')

I have also tried removing all node modules, clearing NPM cache and reinstalling NPM dependencies to no avail.

Answer 1

instead of use the use function to add your axios instance globally can you please try to add it like this:

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import firebase from 'firebase'
import "firebase/auth";
import "firebase/analytics";
import "firebase/firestore";
import moment from 'moment'

Vue.config.productionTip = false

Vue.prototype.$axios = Axios; //<---- like that

new Vue({
  render: h => h(App),
  firebase: firebase,
}).$mount('#app')

after that try to compile again. you are then able to call your axios instance on every component with this.$axios