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" />

总结

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

Vue-cli4 配置别名相关推荐

Vue cli3 或 Vue cli4 配置多入口多页面问题（详解）
本项目用的是Vue cli4,如果是vue cli3也是可以参考使用的省略创建项目这个步骤,接下来在创建好的项目里找到public文件夹,复制多个index.html入口文件,并且修改名称: 每个入 ...
Vue系列Vue-cli 4配置别名（六）
前言 vue-cli3或者4中使用脚手架创建的项目,没有webpack.base.config.js文件,那么咋搞? 手动创建呗? 就可以配置一些额外的操作了,如何配置别名呢,直接上手吧. 一.创建v ...
在vue.config.js下配置别名alias
在vue.config.js下配置别名alias module.exports = {configureWebpack: {resolve: {alias: {'assets': '@/assets' ...
运用 Vue CLI4.X 脚手架构建项目实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. 运用 Vue CLI4.X 脚手架构建项目实战前言一.什么是 Vue CL ...
vue执行配置选项npm run serve的本质
vue执行配置选项npm run serve运行开发服务器的本质目录 vue执行配置选项npm run serve运行开发服务器的本质一.启动开发服务器.调用"工具链".编译. ...
vue cli4 兼容IE浏览器
Babel是一个JavaScript编译器 Babel是一个工具链,主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript.以下是Babel可 ...
【Vue3】vite配置css 的sourceMap ,以及文件引用配置别名
Vite 2.9配置浏览器加载 CSS 源映射 vite.config.ts,有一个devSourcemap属性css可以设置为true. 这是vite.config.ts我目前正在使用的文件: ex ...
vite配置别名，并处理报错：找不到模块“xxx”或其相应的类型声明
vite配置别名,并处理报错:找不到模块"xxx"或其相应的类型声明 1.配置vite.config.ts文件 2.配置tsconfig.json文件 1.配置vite.confi ...
Vue Cli4 热更新失效，浏览器不会自动刷新内容
Vue Cli4 热更新失效在VScode中,需要保存文件后自动刷新浏览器的内容,否则还得手动刷新浏览器,给开发造成极大的不便.我们要在项目根目录下找到vue.config.js(若没有这个文件,则 ...

Vue-cli4 配置别名

Vue-cli4配置alias

文章目录

前言

配置别名

别名-使用方法

总结

Vue-cli4 配置别名相关推荐

最新文章

热门文章