Javascript @在导入路径中是什么意思？

我正在启动一个新的vue.js项目，因此我使用vue cli工具构建了一个新的webpack项目（即

vue init webpack

）

在浏览生成的文件时，我注意到

src/router/index.js

文件中有以下导入：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }
    ]
})

从“Vue”导入Vue
从“vue路由器”导入路由器
从“@/components/Hello”/导入Hello这是通过Webpack配置选项完成的，并不特定于Vue

，网页包配置为将
@/
替换为：

别名用作：

import '@/<path inside src folder>';

导入“@/”；

请记住，您也可以在tsconfig中创建变量：

"paths": {
  "@components": ["src/components"],
  "@scss": ["src/styles/scss"],
  "@img": ["src/assests/images"],
  "@": ["src"],
}

这可用于命名约定目的：

import { componentHeader } from '@components/header';

---

我接受了下面的组合

import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'

IDE将停止警告uri，但这会导致编译时“build\webpack.base.conf.js”中的uri无效

解析：{
扩展：['.js'、'.vue'、'.json']，
别名：{
“src”：解析（“src”），
}
}，

解析（'src'）） 不适合我 但是 解析路径（'src'） 工作

---

也许可以尝试添加网页包mix.webpackConfig参考laravelmix

mix.webpackConfig({

    resolve: {
        alias: {
            '@imgSrc': path.resolve('resources/assets/img')
        }
    }
});

然后在vue中使用

<img src="@imgSrc/logo.png" />

---

一定有什么改变了。这里给出的答案不再正确。在第09章中，在其导入语句中使用@sign，但webpack.config.js文件没有路径解析语句：

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()

---

@FelixKling这不是一个完全的复制品，因为它不能回答整个问题，这是es6吗？一个网页包的东西？一个vue加载程序的东西？是的，我想这个问题是相似的，但不是重复的。不管怎么说，我找出了它的来源，并用解释更新了问题，因为我不能将它作为答案添加。@estus：答案很清楚，它不是ES6的一部分，而是一个网页包配置，你不觉得吗？这里的情况也是如此，只是配置的性质有点不同。@FelixKling，这取决于具体情况。但由于您链接的问题没有详细的答案来解释Webpack的问题，它可能应该得到一个答案。通常有“可能重复的…”的评论就足以说明问题之间的联系，其余的则是民粹之音。我经常看到问题被过度欺骗。JavaScript不再是JavaScript了。Babel/webpack为我们提供了这种弗兰肯斯坦语言，不知何故，新开发人员应该知道ECMAScript规范在哪里结束，用户地带插件/转换在哪里开始。这真的很悲哀，我想。@naomik这取决于用户是否在设置中引入这些技巧。这对Vue来说并不是什么大不了的事，因为它依赖于它的自定义.Vue文件格式。我个人认为，如果您需要的话，能够增加灵活性是一件好事。我看它不像弗兰肯斯坦，更像伏尔伦；你可以像狮子一样做事，也可以把不同的狮子组合在一起做成一个更大的机器人。是的，有时候你会遇到像这样的问题，但答案并不是找不到的。实际上，你可以对任何规模的项目采用弗兰肯斯坦或沃尔特伦的观点，这只是“使用和理解依赖关系”。@ChrisSchmitz这取决于上下文和视角。这样做会限制项目使用Webpack。如果项目打算在本地ES6模块到达时使用它们，或者在CommonJS可以用于模块的节点上使用它们，那么这可能不是一件好事。另一方面，较长的相对路径可能更难维护和重构。使用

vue cli

v3+时，应使用

~@

引用

src

文件夹。例如：

$font路径：“~@/assets/font/”tsc

不是，因此您需要类似

模块别名

或

tsconfig路径的内容。
<img src="@imgSrc/logo.png" />

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()