Vue Loader无法解析“@”
是因为在Vue组件中使用了相对路径，但Vue Loader默认只解析相对于项目根目录的路径。为了解决这个问题，可以在webpack配置中添加resolve.alias配置项，将@指向项目根目录的src目录。这样Vue Loader就能正确解析以@开头的相对路径。
具体操作如下：
- 打开项目的webpack配置文件，通常是webpack.config.js或webpack.base.config.js。
- 在resolve配置项中添加alias配置项，如下所示：
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}- 保存文件并重启项目的开发服务器。
现在，Vue Loader就能正确解析以@开头的相对路径了。例如，如果在Vue组件中使用了import语句引入了一个以@开头的相对路径的模块，Vue Loader会将其解析为项目根目录下src目录中的对应模块。
推荐的腾讯云相关产品是云服务器（CVM）和对象存储（COS）。云服务器提供了弹性的计算资源，可以用来部署和运行前端、后端等各类应用。对象存储可以用来存储和管理大量的文件和数据。
- 腾讯云服务器（CVM）产品介绍链接：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）产品介绍链接：https://cloud.tencent.com/product/cos
注意：以上答案仅供参考，具体的解决方案和推荐产品可能因实际情况而异，建议根据具体需求进行选择和配置。
相关·内容
我正在使用webpack来构建我的vue.js应用程序，一切都很好，直到图像被导入到一个node_module css文件中。它们不能被解决。
<style lang="less">
@import '~@vue/vue';
</style>
vue.less中的位置
@import (inline) "@{node_modules}/third_party_lib/unmodifiable.css";
无法解析'./my_image.png'
向vue-loader添加url=false是一种选择
{
浏览 2提问于2017-11-20得票数 1
我试图将我的.vue组件更改为使用TypeScript而不是JavaScript。因此，我的单个文件组件如下所示：
<template>
...something...
</template>
<script lang="ts">
import { } from "./main.ts";
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
浏览 1提问于2019-09-29得票数 0
我对vuejs，html和css是个新手。当我尝试在App.vue中导入scss文件时，如果我像这样导入，它就会工作
<script>
import '@/assets/scss/main-pc.scss')
</script>
但是，如果我将其导入到style中
<style lang="scss">
@import '@/assets/scss/main-pc.scss';
</style>
它不能正常工作，我遇到了这个错误
These relative modules were n
浏览 1提问于2019-12-18得票数 0
1回答
我启动了一个新的vue-router / Webpack项目，并在通过vue init vuetify/webpack建立了一个项目之后尝试实施了一个项目。
我根据来自的指令来设置路由器。经过一些修改之后，我改变了导入Vue组件的方式，从而使其工作正常。
在我的router/index.js文件中：
// works for me
import Main from '../components/Main.vue'
// does NOT work; from the tutorial
import Main from '@/components/Main'
我
浏览 1提问于2017-05-24得票数 6
2回答
我用我的package.json做了"npm运行构建“。我传达了这条信息。我怎么能用“和webpack在一起？”
./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.中的误差未找到/src/App.vue模块:错误:无法解析‘@/js?type=script&index=0/CompHoge’在‘C：\js?type=script&index=0\ctc\下载\vue’@js?type=script&index=0 e=script&index=0！/src/Ap
浏览 1提问于2018-02-02得票数 6
回答已采纳
现在我使用的是webpack配置的vue-cli，这在Internet 10上遇到了麻烦。问题是webpack没有将let或const转换为var，IE10不支持let和const这样的ES5变量。
下面是webpack.base.conf.js代码。
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: ['babel-polyfill','./src/main.js'],
},
output: {
path: con
浏览 2提问于2018-01-29得票数 0
回答已采纳
当我使用可选链并在.browserslistrc，中设置Electron 12.0.2时，项目将无法生成。
in ./src/views/reader/reader.ts
Module parse failed: Unexpected token (15:29)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/ts-loader/index.js
* ./node_modules/eslint-loader/index.js
You ma
浏览 8提问于2021-08-23得票数 0
回答已采纳
我正在尝试理解vuejs，我在webpack.config.js文件中注意到的一件事是
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-l
浏览 0提问于2017-04-27得票数 0
日安！该项目采用webpack 5，测试本身是在过渡之前编写的。很明显，babel有一个问题，尽管配置是根据jest文档编写的，但我尝试了所有的方法，并在论坛和Github上查找了很多东西，但是我找不到解决方案。我尝试的每一件事似乎都不起作用。我需要帮助！谢谢!
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount, mount, createLocalVue } from '@vue/tes
浏览 1提问于2021-05-04得票数 0
我有一个使用vue库项目的vue客户端项目( vue库项目也使用了一些第三方包，如vue-material)。
它们是通过客户端项目的Package.json链接起来的，就像这样的"lib": "file:../lib"，我正在使用import Comp from "lib/src/components/Comp";在客户端项目中导入组件
问题是当我使用Webpack构建客户端项目时，我的库中的文件使用lib/node_modules/vue而不是node_modules/vue，这会导致双vue实例化。
谁知道为什么当我使用客户端文件夹中的we
浏览 26提问于2019-10-21得票数 2
回答已采纳
我不知道该怎么做。我使用的是带有CSS，style，sass和手写笔加载器的Webpack。这是我的webpack配置。当我使用如下命令时，图像不会显示：
body
background-image: url('bg.jpg')
如果我在带有<img>标签的超文本标记语言中包含图片，它们可以正常工作...
我的webpack配置：
var path = require('path')
module.exports = {
entry: {
app: './src/main.js'
},
output: {
浏览 1提问于2016-02-27得票数 2
1回答
我现在尝试了几个小时让全局变量在电子邮件中与webpack和vue一起工作，但是vue找不到声明的变量。
webpack.config.js
{
test: /\.scss$/,
use: [
"vue-style-loader",
"css-loader",
{
loader: "sass-resources-loader",
options: {
resources: 'src/assets/scss/custom/_variabl
浏览 0提问于2019-02-08得票数 1
我试图在Vue单文件组件和Webpack 2中使用SugarSS，但到目前为止还没有成功。这是我的组件文件：
<template lang="pug">
h1 hello!
</template>
<script>
export default {
data: () => {
return {message: "hello!"}
}
}
</script>
<style scoped lang="postcss">
h1
co
浏览 2提问于2016-12-22得票数 0
回答已采纳
当我导入一个没有.vue扩展名的vue文件时，我会得到以下错误。
找不到./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue模块中的错误:错误:无法解决'./components/Navbar‘
我的web返回配置如下所示
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
浏览 6提问于2017-05-31得票数 12
回答已采纳
1回答
两部分问题
我的脚步：
创建空文件夹
开放cmd
导航到文件夹并运行npm init -f
运行vue init webpack
运行npm install
npm i bootstrap-vue
npm run dev
我的main.js：
import Vue from 'vue'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import
浏览 0提问于2017-09-21得票数 1
回答已采纳
1回答
我想在Vue JS组件中使用firebase，但似乎在创建组件之后加载了firebase对象。
在执行JS代码之前，是否有一种方法可以等待firebase加载？
例如:我想创建一个名为loader的vue复合器，它在他创建时将firebase对象输出到web控制台上。
<html>
<head>
<!-- Firebase -->
<script defer src="/__/firebase/5.0.4/firebase-app.js"></script>
<!-- include only the
浏览 1提问于2018-06-06得票数 2
回答已采纳
初学者Vuejs在这里提问。我试图用Vuejs和Webpack编译sass文件。在安装了之后：
npm install sass-loader node-sass --save-dev
然后，我可以在组件中使用sass处理：
<style lang="sass">
/* This works with my local components */
</style>
问题是当我想使用生活在sass中的第三方模块中定义的node_modules文件时。特别是，我想使用。现在，当我想在组件中导入sass文件时：
<style lang="sc
浏览 3提问于2017-06-13得票数 3
回答已采纳
1回答
为什么我会在下面收到警告：
<img :src="getImgUrl(post.thumbnail.src)" :alt="post.thumbnail.alt">
methods: {
getImgUrl(pic) {
return require( '~/assets/' + pic )
}
}
航站楼警告：
Module parse failed: Unexpected character '#' (1:0)
浏览 1提问于2019-02-24得票数 1
回答已采纳
my- project -directory是我的项目的完整路径。
根据Vue.js官方文档，我通过"vue init webpack my- project“开始了一个名为”vue init webpack my-project“的项目。
我正在尝试通过添加vuetype来切换到TypeScript。
我已经在我的src目录的根目录下添加了一个resources.d.ts文件，尽管我不确定它是如何被引用的：
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
我
浏览 16提问于2017-08-09得票数 4
我正在尝试访问env变量，但是我无法使它工作:我尝试创建.env文件并设置变量
VUE_APP_TOKEN: 11token22
但是当我console.log的时候，我得到了undefined。
接下来，我尝试在quasar.conf.js中设置env变量：
build: {
vueRouterMode: 'hash', // available values: 'hash', 'history'
env: {
VUE_APP_TOKEN:'11token22'
},
extendWebpack (c
浏览 6提问于2021-06-08得票数 1
在我的Vue项目上将v-calendar升级到最新版本后，我收到了这条消息。
./node_modules/v-calendar/lib/v-calendar.umd.min.js
Module parse failed: Unexpected token (1:30468)
You may need an appropriate loader to handle this file type.
这是我的代码：
webpack.base.conf.js
module: {
rules: [
(...)
{
test: /\.js$/,
lo
浏览 2提问于2021-01-25得票数 1
1回答
模块Vue需要什么NPM依赖项？
、、、、
我对HTML + JS库中使用SSR开发的传统多页面应用程序有一定的了解，但我对现代web开发还很陌生。我目前正在学习Vue JS (最新版本)，我已经在网上观看了一些教程视频。我看过的视频教我用普通的HTML + <script>设置来编写Vue JS网页，而不是用Vue CLI程序创建的项目设置。
现在，我想知道package.json文件中的NPM依赖项需要哪些才能将项目设置从单个HTML + Vue CDN脚本src更改为由vue-cli设置的文件夹结构，就像其他CLI创建的现代项目文件夹结构一样，例如角和响应。
运行vue init <template name&g
浏览 0提问于2019-04-28得票数 1
7回答
在将npm & node更新到其上一个版本后，当我尝试运行vue项目时，会出现以下错误：
没有找到这些依赖关系：
!!vue-style-loader!css-loader!../../../../../../../../../swlkagenda/1.2.0/build/node_modules/vue-loader/lib/style-rewriter?id=data-v-c906422a&scoped=true!wisaapp/login/login.css in /home/projects/wisaweb/trunk/app/modules/wisaapp
浏览 9提问于2017-09-13得票数 11
我有一个vue2组件，如下所示：
<template>
<p>Hello world</p>
</template>
<script>
export default { name: 'Example' };
</script>
<docs>
Some documentation...
</docs>
我还想为我的vue文件使用额外的加载程序，所以我的webpack配置如下所示：
module.exports = {
module: {
rules: [{
浏览 3提问于2021-02-08得票数 2
回答已采纳
1回答
Vue 2未能挂载组件
、、、、
我用的是Laravel 5.2和Vue 2.0.6。如果我使用本地组件，它可以正常工作。但是，当我尝试使用来自另一个.vue文件的全局组件时，它会显示以下错误：
[Vue warn]: Failed to mount component: template or render function not defined. (found in component <test> at path\to\site\resources\assets\blog\components\test.vue)
Test.vue
<template>
<div>
浏览 2提问于2016-11-17得票数 1
我目前正在使用vuejs启动一个新项目，并希望将primevue用于一些组件。总的来说，我对VueJS的了解并不是最好的，因为我刚刚开始使用它。我的应用程序有一个基于webpack的构建，配置了vue-加载程序，所以primevue是如何安装的。
我试图使用Toast组件，但是当从'primevue/toastservice‘导入Toast时，webpack抛出了以下两个错误：
./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js& (./node_modules/v
浏览 4提问于2020-01-29得票数 2
回答已采纳
1回答
我有一个项目，它使用当前版本的存档库4.17.5。
这个项目有它的依赖，它基本上是codemirror的一个小版本。
Codemirror模块使用JSHINT作为它的依赖项，JSHINT依赖于提交版本3.x。
现在，由于我在我的项目中有一个目录4.x版本，每当在JSHINT中调用一个请求时，它都需要一个4.x版本，而不是3.x版本，并且抱怨缺少方法，而这些方法已经不再被协调性4.x所支持。
这是我的npm命令输出的一部分。在我的node_modules/lodash中，我有一个lodash 4.x版本，而在我的node_modules/jshint/node_modules/lodash中是3
浏览 0提问于2018-02-16得票数 4
1回答
我使用的是.vue.html/..ts/..scss模式的Vue。每个文件夹都包含一个.ts、一个.vue.html和一个成为Vue组件的.scss文件。再加上这个，我就用Webpack。
今天，当我开始工作时，Webpack停止了对.vue.html文件的检测。现在它似乎只检测到.ts文件。这是我的webpack配置：
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webp
浏览 2提问于2021-02-23得票数 2
回答已采纳
我正在组建webpack，但我有个问题。我知道，在解析模块中设置node_modules时，库是自动连接的。所以我像这样设置webpack ( webpack文件位于根文件夹中的config文件夹下)。
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const env = process.
浏览 2提问于2020-09-19得票数 0
我想设置我的图像为css文件，但它给出的错误，编译失败，我是新手在vue。
我尝试@从src进行相对寻址
body{
background: url("@/image/background.png");
}
但是它使我出错，无法编译，不管怎样，我尝试了另一种方法，它再次显示错误，无法编译。
body{
background: url("../image/background.jpg");
}
整个错误是：
Failed to compile.
./node_modules/css-loader?{"sourceMap":true}!./
浏览 81提问于2018-08-03得票数 0
我加了那个包裹
yarn add themify-icons-sass
然后在我的组件中，我在脚本和样式中导入了它。
<script>
....
import 'themify-icons-sass'
<style lang="scss" scoped>
@import 'themify-icons-sass/themify-icons';
...
但是我得到了一个构建错误
This dependency was not found:
* themify-icons-sass in ./n
浏览 7提问于2018-01-14得票数 1
我正在尝试利用类型记录项目引用在monorepo中构建一个Vue应用程序。我目前的项目结构如下：
client/
package.json
tsconfig.json
src/
...
server/
package.json
tsconfig.json
src/
...
shared/
package.json
tsconfig.json
preferences.ts
permissions.ts
interfaces/
...
client/tsconfig.json
{
"compilerOptions&
浏览 1提问于2021-05-24得票数 2
回答已采纳
假设我使用pnpm在一个单一功能包中有两个包。一个用于Vue@3 (package-a)，另一个用于Vue@2 (package-b)。为了记录在案，它们都依赖于名为core的第三个包。
您可以在下面找到它的样子：
.
├── .npmrc
├── .nvmrc
├── package.json
├── packages
│ ├── package-a
│ │ ├── index.ts
│ │ ├── node_modules
│ │ │ ├── .bin
│ │ │ │ ├── tsc
│ │ │ │ ├── tsserver
浏览 14提问于2022-05-23得票数 2
回答已采纳
我是Vue的初学者，我正在尝试用Vue构建一个多页面的web应用程序。但以下是我的问题：
Failed to compile.
./src/index/views/Home.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-lo
浏览 1提问于2020-06-19得票数 1
回答已采纳
4回答
因此，我尝试让PDF查看器与pdf.js和vue-pdf等一起工作。
我可以让vue-pdf工作，但是我似乎无法获得本地文件来呈现，在pdf.js的情况下，我试图在网站上下载示例项目，但是我只得到了一个无法获取的。
testPage.vue with vue-pdf
<template>
<div>
<pdf src="../assets/test.pdf"></pdf>
</div>
</template>
<script>
import pdf from 'vue-
浏览 5提问于2017-10-31得票数 3
3回答
每当我想要构建一个文件时，我总是会收到错误。原因是什么？webpack似乎无法识别.vue文件，但是webpack配置文件看上去是正确的。webpack误差
bundle-app.js 189 kB 1 [emitted] app
+ 12 hidden modules
ERROR in Unexpected token >
@ ./app/application.js 7:11-31
webpack.config.js
var path = require("path");
module.exports = {
context: p
浏览 4提问于2017-03-19得票数 9
回答已采纳
我尝试使用from firebase store动态加载图像(我从firestore获取URL并将其存储在一个数组中)。
但是:src='require("user.documents.selfie.url")'和:src='user.documents.selfie.url'都不能工作。我已经尝试了大量的stackoverflow答案，但没有成功。
模板PUG：
v-col.col-3(v-for='(user, i) in users' :key='i')
v-card(max-width='374
浏览 2提问于2020-05-08得票数 0
如果.vue文件中有样式，我似乎无法使用单个文件组件构建Vue项目。
它在没有样式标记的情况下成功构建。但一旦我加了样式就给我一个错误。
ERROR in ./src/Martins.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./src/Martins.vue?vue&type=style&index=0&lang=css&) 9:0
Module parse failed: Unexpected
浏览 1提问于2019-05-09得票数 0
回答已采纳
1回答
我的Webpack配置中有以下模块：
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
include: projectRoot,
exclude: /nod
浏览 1提问于2016-05-04得票数 29
回答已采纳
我正在用webpackconfig开发一个应用程序，我已经安装了"sass-loader“和"node-sass”，并尝试了所有不同的配置，我在官方的webpack文档和其他加载scss的web参考中都找到了这些配置，但我无法解决以下错误 ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-311067c8","scoped":false
浏览 50提问于2020-09-02得票数 0
2回答
在包更新之后，我在vue项目中遇到了以下错误：
Failed to compile.
./node_modules/@polkadot/networks/packageInfo.js 6:27
Module parse failed: Unexpected token (6:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#lo
浏览 6提问于2022-01-12得票数 1
回答已采纳
2回答
如何在Vue 3中导入svg？
、、、、
我尝试了一下：https://github.com/visualfanatic/vue-svg-loader/tree/master 但是由于Vue 2中使用了Vue模板编译器，因此与vue-template-compiler存在版本冲突。 我试过了：https://github.com/visualfanatic/vue-svg-loader 但我遗漏了一个特定的vue依赖。 我注意到使用typescript有一个警告，你需要声明类型定义文件。但是，我仍然得到“无法找到模块'../../assets/myLogo.svg‘或其相应的类型声明”。 下面是我添加的内容： vue.con
浏览 72提问于2020-12-02得票数 4
回答已采纳
3回答
"vue"："^2.6.14“"swiper"："^7.0.5"，
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
例如，我尝试默认导入，但是：
没有找到这些依赖关系：
./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js
浏览 5提问于2021-09-14得票数 5
--我得到了这个跟踪，在从github中提取新代码之前，我不会得到这个错误，但是我无法检测哪个模块没有导入
* ./assets in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/JobDetailPrint.vue?vue&type
浏览 5提问于2021-02-04得票数 0
版本 15.4.0 复制链接 https://codepen.io/fendi-tri-cahyono/pen/wbXKMZ?editors=0010 重现步骤 ERROR in ./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&typ
浏览 44提问于2019-06-13得票数 0
回答已采纳
我正在尝试创建一个Vue单页组件。我使用Node14.19.1和SPFx 1.14，对于创建项目，我使用了Yeoman。当我在本地部署项目时，我得到了下一个错误
Error - 'webpack' sub task errored after 131 ms Rule can only have one resource source (provided resource and test + include + exclude) in {
"enforce": "pre",
"use": "C:\\work
浏览 9提问于2022-06-17得票数 1
你能帮我弄清楚我做错了什么吗？如果我使用以下语法导入
const Home = (resolve) => import('./views/Home.vue').then(resolve)
我收到以下错误：
[Vue warn]: Failed to mount component: template or render function not defined.
(found in anonymous component - use the "name" option for better debugging messages.)
如果我使用标准Impo
浏览 1提问于2017-03-29得票数 0
我想从根文件夹开始导入，而不是往下走几个文件夹。我该怎么做？
当我试图为我的主页导入一个访客手册(就像1999年)时，我遇到了这个问题。
import MyGuestbook from '../../components/MyGuestbook.vue'编译。
import MyGuestbook from '/src/components/MyGuestbook.vue'没有。
import MyGuestbook from '@/components/MyGuestbook.vue'也没有。
GuestBookPage.vue
<tem
浏览 2提问于2018-08-19得票数 7
回答已采纳
在为自定义规则创建新的eslint之后，vue-cli-service build失败(eslint按预期工作，由./node_modules/.bin/eslint --ext .js,.vue,.json ./ --max-warnings=0触发)。
从一个工作的vue-cli-service build环境中开始，按照上的简化说明，也会复制这个问题。在每一步之后运行vue-cli-service build，在步骤4：yarn add --dev file:./eslint之后开始失败，在完成所有步骤之后，构建仍然失败。
错误消息：
ERROR Failed to compile
浏览 5提问于2020-01-06得票数 14
我无法与webpack一起构建某些PrimeVue UI组件。
我已经尝试过几个组件，所有的基本组件都能正常工作，但是一旦我尝试使用一个需要子组件的组件，webpack就无法构建。到目前为止，我已经在组件中体验到了这一点。
错误是：
ERROR in ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/com
浏览 2提问于2020-05-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
