Vue 配置根目录（用@代替src）

前言

今天发现了一个项目中的路径中有@
比如：

import { getList } from '@/api/table'

又或者

import router from '@/router'

学识尚浅的我就看不懂了，但是懵懵懂懂又觉得肯定是哪里配置过了，@肯定是代替了路径的一些东西

知识点

其实多看几个文件就会发现了，@代替了src目录
看出来代替了什么其实不难，难点主要是怎么去配置它

配置

1、如果path模块，则先需要npm引入

npm  install  path  --save

2、配置jsconfig.js

{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}},"exclude": ["node_modules", "dist"]
}

3、配置vue.config.js

方法一：（我看的项目用的）

// 配置configureWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)module.exports = {configureWebpack: {name: 'vue Element Admin',resolve: {alias: {'@': resolve('src')}}}
}

方法二：

// 配置chainWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)module.exports = {chainWebpack: config => {config.resolve.alias.set('@', resolve('src'))}
}

Vue 配置根目录（用@代替src）相关推荐

react和vue配置本地代理
React 在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可. 但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的 ...
Vue学习--Vue项目根目录介绍(1)
文章目录前言一.build文件夹--webpack 配置目录二.mock文件夹--生成随机数据,拦截ajax请求三.node_modules--npm 加载的项目依赖模块四.public文件 ...
vue配置多代理服务接口地址
vue配置多代理接口地址一.介绍随着微服务架构的流行,后台项目逐渐被拆分成不同的模块进行通信,但是前端还是只有一个项目所以在访问不同模块后台时,需要请求不同的地址,在vue项目中,通过配置代理可以 ...
Vue配置多页面应用
Vue配置多页面应用 vue常用单页面开发,在系统越做越大的时候,常会在系统内嵌套另外的页面,单页面程序已经不太适用了. 单页面应用(SinglePage Web Application,简称SPA) ...
Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)
Vue 配置使用 externals 使用cdn减小打包体积在 vue.config.js 中书写配置 // 引入webpackconst webpack = require('webpack') ...
vue配置启动项目自动打开浏览器
vue配置启动项目自动打开浏览器 1.找到项目中的config文件夹内的index.js,里面有一个配置是autoOpenBrowser:false: 设置为true即可(或者全局搜索autoOpen ...
vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
[vue] 怎么解决vue动态设置img的src不生效的问题
[vue] 怎么解决vue动态设置img的src不生效的问题不是应该 require('@/assets/images/xxx.png') 这样吗??你这样多浪费资源啊 @chenqim 个人简介 ...
vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏
vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

Vue 配置根目录（用@代替src）

前言

知识点

配置

1、如果path模块，则先需要npm引入

2、配置jsconfig.js

3、配置vue.config.js

Vue 配置根目录（用@代替src）相关推荐

最新文章

热门文章