当我使用@更改导入路径时,字段Browser';不包含有效的别名配置 [英] Field 'browser' doesn't contain a valid alias configuration when I changed the import path using @
本文介绍了当我使用@更改导入路径时,字段Browser';不包含有效的别名配置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我更改VUE组件导入时:
import Options from './components/Translator.vue'
收件人:
import Options from '@/popup/components/Translator.vue'
显示错误:
ERROR in ./src/popup/App.vue?vue&type=script&lang=ts (./node_modules/ts-loader/index.js??clonedRuleSet-1!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[8].use[0]!./src/popup/App.vue?vue&type=script&lang=ts) 3:0-67
Module not found: Error: Can't resolve '@/public/widget/translator/Translator.vue' in '/Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup'
resolve '@/public/widget/translator/Translator.vue' in '/Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup'
Parsed request is a module
using description file: /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/package.json (relative path: ./src/popup)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup/node_modules doesn't exist or is not a directory
/Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/node_modules doesn't exist or is not a directory
looking for modules in /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/node_modules
/Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/node_modules/@/public doesn't exist
/Users/xxx/source/reddwarf/frontend/node_modules doesn't exist or is not a directory
/Users/xxx/source/reddwarf/node_modules doesn't exist or is not a directory
/Users/xxx/source/node_modules doesn't exist or is not a directory
/Users/xxx/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
@ ./src/popup/App.vue?vue&type=script&lang=ts 1:0-189 1:0-189 1:190-368 1:190-368
@ ./src/popup/App.vue 2:0-54 3:0-49 3:0-49 8:49-55
@ ./src/popup/index.ts 2:0-28 4:14-17
webpack 5.67.0 compiled with 1 error in 116 ms
browser
在哪里?我搜索了我的整个项目,没有找到这个。我为什么要设置浏览器别名?我应该怎么做才能避免这个问题呢?这是webpack 5.x别名配置:
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
// https://stackoverflow.com/questions/50805384/module-not-found-error-cant-resolve-vue-path-not-correct
vue: 'vue/dist/vue.esm-bundler.js',
'@': path.resolve(__dirname, 'src'),
},
},
今天我又面临同样的问题,调整配置如下:
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
process: 'process/browser',
@: path.resolve(__dirname, 'src'),
},
},
还是一点也不管用。这是我的完整webpack配置:
const path = require('path');
const webpack = require( 'webpack' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin');
const HtmlWebpackPlugin = require( 'html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
entry : {
'popup/popup' : './src/popup/',
'background/background': './src/background'
} ,
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
process: 'process/browser',
'@': path.resolve(__dirname, 'src'),
},
},
output : {
path : path.resolve(__dirname, '../../bundle') ,
filename : '[name].js'
},
module : {
rules : [
{
test: /.ts$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/.vue$/]
},
exclude: /node_modules|.d.ts$/
},
{
test: /.d.ts$/,
loader: 'ignore-loader'
},
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test : /.js$/ ,
exclude : [ /node_modules(?!(/|\?\)(translation.js|selection-widget|connect.io|chrome-env)1)/ ] ,
loader : 'babel-loader'
} ,
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test : /.(scss)$/ ,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins : [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new VueLoaderPlugin(),
new CopyPlugin({
patterns: [
{ from: "src/manifest.json", to: "manifest.json" },
{ from: "src/resource/image", to: "resource/image" },
],
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
new HtmlWebpackPlugin({
filename: 'popup/popup.html',
template: 'src/popup/index.html'
}),
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
}),
]
};
推荐答案
不要使用@作为别名,只需尝试使用一些基于组件的名称即可。那可能会对你有帮助。
这篇关于当我使用@更改导入路径时,字段Browser';不包含有效的别名配置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文