我有一个新的,非常简单的项目。如果我尝试将json导入到我的入口文件(vanilla .js)中,它会工作,例如:import pkg from './package.json';
当我尝试在.vue文件的<script>
块中执行相同操作时,在构建过程中会出现以下错误:
WARNING in ./App.vue?vue&type=script&lang=js& 1:192-195
export 'default' (imported as 'mod') was not found in '-!./node_modules/babel-loader/lib/index.js??clonedRuleSet-1.use!./node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&' (module has no exports)
所有文件都在同一个目录中。
有人能建议如何缓解这种情况吗?我是Webpack的新手,所以我想知道是否有一个特定的设置或结构的加载器,我错过了。
package.json:
{
"scripts": {
"build": "webpack"
},
"dependencies": {
"vue": "^2.7.14"
},
"devDependencies": {
"@babel/core": "^7.22.11",
"@babel/preset-env": "^7.22.10",
"babel-loader": "^9.1.3",
"cross-env": "^7.0.3",
"css-loader": "^6.8.1",
"node-sass": "^9.0.0",
"postcss-loader": "^7.3.3",
"postcss-preset-env": "^9.1.2",
"postcss-url": "^10.1.3",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
"vue-loader": "^15.10.1",
"vue-template-compiler": "^2.7.14",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4"
}
}
webpack.config.js:
const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");
module.exports = {
devtool: false,
entry: {
main: "./main.js",
},
mode: "development",
output: {
filename: "output.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.vue$/,
use: {
loader: "vue-loader",
options: { productionMode: false }
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { presets: ['@babel/preset-env'] }
}
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: { importLoaders: 2 },
},
'sass-loader'
]
}
],
},
plugins: [
new VueLoaderPlugin()
]
};
我尝试过的:
- 从包名中删除.json扩展名
- 使用默认或非默认导入类型
- 使用json-loader即使json导入现在内置到webpack中
- 将.json扩展名添加到vue-loader
- 将.json扩展名添加到babel-loader
1条答案
按热度按时间11dmarpk1#
解决了,两个注意事项:
const pkg = require('./package.json');
我现在意识到“模块没有导出”错误是指.vue文件中的
<script>
块,而不是试图传达有关json导入的信息。