找不到 Vuejs 模块错误无法使用 webpack 解决 '@/components/ 错误

Question

我找不到这个问题的答案，除了显然它与 webpack 配置有关，我对此一无所知。

我想使用以下方式进入运行 webpack-simple 模板 @/components/的应用程序目录，但对我来说它只会生成一个错误

找不到模块错误无法解决"@/组件/错误">

从我所做的阅读中，我需要在 webpack 配置中设置一些东西才能完成这项工作，但我找不到它是什么，有人可以帮忙吗？

目前，我正在开发服务器中尝试此操作，但显然热衷于确保它也可以在生产中运行

我找到了这个 js 代码，我认为它可以做我想要的，但不知道如何在以前从未使用过的 webpack 设置下使其工作

谢谢

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
}
}
}

谢谢

Answer 1

我使用这个模板：https://github.com/vuejs-templates/webpack。

在已经创建的 webpack.base.conf 中，这是导出的配置对象的一部分(我包含的不仅仅是提供上下文的相关内容(：

module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js',
},
plugins: [
// make jquery available for all modules
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
})
],
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},

这部分可能会帮助您：

resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},

现在在我的导入中，我只是写一些类似的东西

import myModule from '@/fileInSrcFolder';

其中 @ 是根文件夹中的 SRC 文件夹。

只是为了完成，配置文件位于根文件夹的文件夹中，resolve 函数如下所示：

function resolve (dir) {
return path.join(__dirname, '..', dir)
}

Answer 2

我对 Webpack 唯一要做的就是创建一个别名，以便 @ 指向 js 根目录。这样就消除了导入文件时对相对路径的需求。将以下代码添加到 webpack.mix.js。

mix.webpackConfig({    
resolve: {      
alias: {
@’: __dirname + '/resources/assets/js'      
},    
},  
})

https://medium.com/@sadnub/vuejs-and-laravel-api-part-2-711c4986281c

Answer 3

我有同样的错误。 @sebastian&@Mattias帮助我得到了确切的解决方案。

我的配置是

const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/main.ts",
target: "web",
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
publicPath: "/",
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".vue", ".json"],
alias: {
"@/": path.resolve(__dirname, "src"),
"@/vuex": path.resolve(__dirname, "src/vuex"),
},
},
module: {
rules: [
{
test: /.ts$/,
exclude: /node_modules/,
include: /src/,
loader: "ts-loader",
options: {
transpileOnly: true,
appendTsSuffixTo: [/.vue$/],
},
},
{
test: /.vue$/,
loader: "vue-loader",
options: {
loaders: {
scss: "vue-style-loader!css-loader!sass-loader",
sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax",
},
},
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /.s[ac]ss$/i,
use: ["vue-style-loader", "css-loader", "sass-loader"],
},
{
test: /.(png|svg|jpe?g|gif)$/i,
loader: "file-loader",
options: {
outputPath: "assets",
},
},
],
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public", "index.html"),
filename: "index.html",
favicon: "./public/favicon.ico",
}),
// make sure to include the plugin for the magic
],
optimization: {
moduleIds: "hashed",
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: "vendors",
priority: -10,
chunks: "all",
},
},
},
},
};

专注于这部分

resolve: {
extensions: [".ts", ".tsx", ".js", ".vue", ".json"],
alias: {
"@/": path.resolve(__dirname, "src"),
"@/vuex": path.resolve(__dirname, "src/vuex"),
},
},

自定义resolve函数对我不起作用，但直接使用path.resolve()函数帮助我避免了此错误。