javascript - 未找到模块:错误:无法解析 vue,路径不正确
问题描述
我的 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
]
},
....
}
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
解决方案
这个问题在 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',
}
希望它可以为其他人节省时间。
推荐阅读
- javascript - Magento 在产品详细信息页面加载时运行自定义脚本
- wordpress - 在编辑器中隐藏 wordpress 管理菜单中的自定义帖子类型链接
- angular - 从图像库中获取图像
- elixir - 如何在 Elixir 中为 Uberauth 添加状态参数
- ocaml - 为多态变体类型编写类型签名时可以使用类型变量吗?
- android - 启动设置活动时的 Android 9 后退按钮无法正常工作
- python - 使用 datetime 作为存储在 JSON 中的计时器
- python - 基于单个特征集的分类精度
- php - Woocommerce 通过 Hook 的变化
- merge - Power Query - 合并查询返回 true 或 false