vue项目使用webpack 配置别名alias

需求：当项目逐渐变大之后，文件与文件直接的引用关系会很复杂，这时候就需要使用 alias 了。有的人喜欢alias 指向src目录下，也可以设置搜索的模块后缀名，再使用相对路径找文件；

作用：设置别名可以让后续引用的地方减少路径的复杂度

文章目录

1. 项目结构
2. webpack.config.js
3. 使用

1. 项目结构

- src- utils- index.js- config- config.js- main.js
- webpack.config.js

2. webpack.config.js

const resolve = dir => require('path').join(__dirname, dir)
module.exports = {resolve: {alias: {'@': resolve('src'), //配置src目录的别名'_c': resolve('src/components') //配置公共组件目录的别名}}
}

3. 使用

因为设置了alias，所以引入utils.js时候可以这样简写

import utils math from "@/utils/index.js";

vue项目使用webpack 配置别名alias相关推荐

在vue.config.js下配置别名alias
在vue.config.js下配置别名alias module.exports = {configureWebpack: {resolve: {alias: {'assets': '@/assets' ...
vue-cli 3.0配置webpack目录别名alias
最近用vue脚手架新建工程的时候,发现vue-cli提供的是3.0.0-beta.6版本,安装完成之后也找不到config.build等目录,不懂要从哪里入手配置别名alias 看了下官方文档,简化成 ...
vue-cli3搭建项目之webpack配置
vue-cli3搭建项目之webpack配置一.vue.config.js文件 const path = require('path')module.exports = {publicPath: ' ...
vue项目打包与配置-学习笔记
文章目录 vue项目打包与配置-学习笔记前端打包打包的代码如何运行打包指定不同的环境变量(开发,测试) 打包手动配置文件打包压缩,大文件处理 gzip进一步压缩打包app 打包部署模式 vu ...
webpack配置别名，typescript报错2307的解决办法
webpack配置别名,typescript报错2307的解决办法 webpack配置: resolve: {alias: {'@': path.resolve(__dirname, 'src')}} ...
[vue] 在vue项目中如何配置favicon？
[vue] 在vue项目中如何配置favicon? 也可以在当前项目部署的端口主目录下存放favicon.ico文件,默认就会显示该图标个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
Vue项目中ESLint配置（VScode）
Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint, ...
vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
Vue系列Vue-cli 4配置别名（六）
前言 vue-cli3或者4中使用脚手架创建的项目,没有webpack.base.config.js文件,那么咋搞? 手动创建呗? 就可以配置一些额外的操作了,如何配置别名呢,直接上手吧. 一.创建v ...
vue 项目使用 webpack 构建自动获取电脑ip地址
1.开发 H5 时移动端,经常会使用真机进行调试本地环境.webpack 配置服务器好多脚手架写的都是固定的,而在团队开发中需要每人配置自己的本机 ip 进行开发,每次开启开发环境的都需要修改,并且还 ...

vue项目使用webpack 配置别名alias

文章目录

1. 项目结构

2. webpack.config.js

3. 使用

vue项目使用webpack 配置别名alias相关推荐

最新文章

热门文章

vue项目 使用webpack 配置别名alias

文章目录

1. 项目结构

2. webpack.config.js

3. 使用

vue项目 使用webpack 配置别名alias相关推荐

最新文章

热门文章

vue项目使用webpack 配置别名alias

vue项目使用webpack 配置别名alias相关推荐