vue项目引入路径前面的@符号是什么？（简化路径）

最新推荐文章于 2023-09-26 11:29:17 发布

前端的路人丁

最新推荐文章于 2023-09-26 11:29:17 发布

阅读量1.2k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yinzisang/article/details/121202853

版权

在Webpack配置中，可以通过设置resolve.alias来创建别名，例如将'@'映射到'src'目录，从而将深层次的导入路径如'../../../../model/apiUtils'简化为'@/model/apiUtils'，提高代码可读性和维护性。

摘要由CSDN通过智能技术生成

webpack 配置

在 js 中 import 相对路径代码的时候经常出现路径层级较深的情况，引入起来比较麻烦（虽然 webstorm 支持提示简化了不少），所以在 webpack 中可以做如下配置：

configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')  
      }
    }, plugins: [
      // new webpack.ProvidePlugin({
      //   PIXI: 'pixi.js'
      // }),
      new MomentLocalesPlugin({
        localesToKeep: ['es-us', 'zh-cn']
      })
    ]
  },

于是 import {getJson, del} from '../../../../model/apiUtils'; 就可以写成 import {getJson, del} from '@/model/apiUtils';