Vue-cli4 alias配置

Posted 2021-07-19 白瑕

Vue-cli4配置alias

文章目录

• Vue-cli4配置alias
• 前言
• 配置别名
• 别名-使用方法
• 总结

---

前言

之前去查了设置别名的方法,都说在vue.config.js里进行配置,我把他们的代码复制下来跑了一次,别名根本不生效;

---

配置别名

首先依据如下路径找到base.js文件;

node_modules>@vue>cli-service>lib>config>base.js

然后找到如下:

    webpackConfig.resolve
      // This plugin can be removed once we switch to Webpack 6
      .plugin('pnp')
      .use({ ...require('pnp-webpack-plugin') })
      .end()
      .extensions
      .merge(['.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'])
      .end()
      .modules
      .add('node_modules')
      .add(api.resolve('node_modules'))
      .add(resolveLocal('node_modules'))
      .end()
      .alias//alias:别名,在此处依据格式配置别名;
      .set('@', api.resolve('src'))
      .set('assets', api.resolve('src/assets'))
      .set('components', api.resolve('src/components'))
      .set('views', api.resolve('src/views'))

---

别名-使用方法

你配置的这些别名在< script>中写JS时都是可以正常使用的,直接写就可以:

//给@/components配置了别名"components"后:
import NavBar from "components/common/navbar/NavBar";

但是在< template>里写html时就别这么干了,
所有别名在HTML里使用时都要在前面加上"~":

//给@/assets配置了别名"assets"后:
<img src="~assets/img/icon/Gear.png" />

总结

以上是我据本阶段的学习得出的一些经验与心得，如果帮到了您，在下十分荣幸；若是您发现了不足，您可以在评论区指出, 我会感谢您的指点的!