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

e5nszbig  于 2024-01-08  发布在  Webpack
关注(0)|答案(3)|浏览(223)

我的webpack.js.js和node_modules在一个子文件夹中。如果我尝试执行:npm run build,我会得到错误:ERROR in ../public/Vue/Components/Rating.vue Module not found: Error: Can't resolve 'vue'。我认为路径不正确,但我尝试了3个小时,我没有找到解决方案。
文件夹结构如下所示:

  1. project/
  2. +public/
  3. Vue/
  4. Components/
  5. Rating.vue
  6. main.js
  7. Dist/
  8. +webpack/
  9. webpack.config.js
  10. package.json
  11. node_modules/

字符串
webpack.config.js

  1. var path = require('path');
  2. var webpack = require('webpack');
  3. var target = '../public/Vue/main.js';
  4. var output = {
  5. path: path.resolve(__dirname, '../public/Dist/'),
  6. filename: 'default.js'
  7. }
  8. module.exports = {
  9. context: __dirname,
  10. entry: target,
  11. output: {
  12. path: output.path,
  13. filename: output.filename
  14. },
  15. resolve: {
  16. alias: {
  17. 'vue$': 'vue/dist/vue.esm.js'
  18. },
  19. extensions: ['*', '.js', '.vue', '.json'],
  20. },
  21. module: {
  22. rules: [
  23. ... // load loader
  24. ]
  25. },
  26. ....
  27. }


main.js

  1. import Vue from 'vue';
  2. import Rating from "./Components/Rating.vue";
  3. new Vue({
  4. el: '#app',
  5. data() {
  6. return {
  7. content: "Hello World",
  8. }
  9. },
  10. components: {
  11. Rating,
  12. }
  13. });


希望有人能帮帮我:)

错误信息

  1. ERROR in ../public/Vue/main.js
  2. Module not found: Error: Can't resolve 'vue' in 'C:\xampp\htdocs\project\public\Vue'
  3. @ ../public/Vue/main.js 1:0-22
  4. ERROR in ../public/Vue/Components/Rating.vue
  5. Module not found: Error: Can't resolve 'vue-style-loader' in 'C:\xampp\htdocs\project\public\Vue\Components'
  6. @ ../public/Vue/Components/Rating.vue 2:2-297
  7. @ ../public/Vue/main.js

fzsnzjdm

fzsnzjdm1#

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

  1. resolve: {
  2. extensions: [ '.tsx', '.ts', '.js', '.vue' ],
  3. alias: {
  4. 'vue': '@vue/runtime-dom'
  5. }
  6. },

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

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


希望能为别人节省时间。

展开查看全部
cmssoen2

cmssoen22#

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

6ioyuze2

6ioyuze23#

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

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

字符串

相关问题