找不到模塊：錯誤：無法解析 vue，路徑不正確

Question

我的 webpack.config.js 和 node_modules 在一個子文件夾中。 如果我嘗試執行： npm run build我得到錯誤： ERROR in ../public/Vue/Components/Rating.vue Module not found: Error: Can't resolve 'vue' 。 我認為路徑不正確，但我嘗試了最后 3 個小時，但沒有找到解決方案。

文件夾結構如下所示：

project/
 +public/
    Vue/
      Components/
         Rating.vue
      main.js
    Dist/
 +webpack/
   webpack.config.js
   package.json
   node_modules/

webpack.config.js

var path = require('path');
var webpack = require('webpack');

var target = '../public/Vue/main.js';

var output = {
    path: path.resolve(__dirname, '../public/Dist/'),
    filename: 'default.js'
}


module.exports = {
  context: __dirname,
  entry: target,
  output: {
    path: output.path,
    filename: output.filename
  },

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },

module: {
    rules: [
      ... // load loader
    ]
  },
 ....
}

主文件

import Vue from 'vue';
import Rating from "./Components/Rating.vue";

new Vue({
  el: '#app',

  data() {
    return {
      content: "Hello World",
    }
  },

  components: {
    Rating,
  }
});

我希望有人能幫我 :)

錯誤信息

ERROR in ../public/Vue/main.js
Module not found: Error: Can't resolve 'vue' in 'C:\xampp\htdocs\project\public\Vue'
 @ ../public/Vue/main.js 1:0-22


ERROR in ../public/Vue/Components/Rating.vue
Module not found: Error: Can't resolve 'vue-style-loader' in 'C:\xampp\htdocs\project\public\Vue\Components'
 @ ../public/Vue/Components/Rating.vue 2:2-297
 @ ../public/Vue/main.js

Answer 1

這個問題在 google 中排名靠前，所以我會為 Vue 3 添加一個設置。使用 Webpack 5 和 Vue 3，webpack配置別名更改為：

resolve: {
    extensions: [ '.tsx', '.ts', '.js', '.vue' ],
    alias: {
        'vue': '@vue/runtime-dom'
    }
},

或者，這可能是解決方案，如果是轉譯錯誤：

    alias: {
        'Vue': 'vue/dist/vue.esm-bundler.js',
    }

希望它為其他人節省時間。

Answer 2

看起來像不運行npm install時可能會得到的東西

你能檢查一下vue文件夾是否存在於C:\\xampp\\htdocs\\project\\public\\Vue\\node_modules嗎？