webpack 错误:无法解析vue,路径不正确

e5nszbig  于 5个月前  发布在  Webpack
关注(0)|答案(3)|浏览(42)

我的webpack.js.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
    ]
  },
 ....
}


main.js

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

fzsnzjdm

fzsnzjdm1#

这个问题在google中排名很高,所以我会为Vue 3添加一个设置。使用Webpack 5和Vue 3,webpack config 别名更改为:

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

字符串
或者,这可能是解决方案,如果是编译错误:

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


希望能为别人节省时间。

cmssoen2

cmssoen22#

看起来像是不运行npm install时可能得到的结果
你能检查这vue文件夹存在于C:\xampp\htdocs\project\public\Vue\node_modules吗?

6ioyuze2

6ioyuze23#

当你从vue 2迁移到vue 3时,忘记删除别名,并删除@vue/compat helper migration build时,也会出现这种情况。

chainWebpack(config) {
// helper to upgrade vue2 to vue3
config.resolve.alias.set('vue', '@vue/compat');

字符串

相关问题