使用Vue-Cli4.x配置文件路径别名

简介: 使用Vue-Cli4.x配置文件路径别名
  • vue脚手架版本升级到4.x以后,目录发生了很大的变化,有些配置需要我们自己去配置
  • 自己项目中的目录结构

在这里插入图片描述

在根目录创建一个 vue.config.js文件

  • 配置一下引入文件路径的别名
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
  chainWebpack:(config)=>{
    config.resolve.alias
    .set('@', resolve('src'))
    .set('assets', resolve('src/assets'))
    .set('api', resolve('src/api'))
    .set('views', resolve('src/views'))
    .set('components', resolve('src/components'))
    //set第一个参数:设置的别名,第二个参数:设置的路径    
  }
}
  • 然后需要再次重启一下项目即可
目录
相关文章
|
存储 JSON JavaScript
VUE2(七)VUE配置.env文件使用
公司的项目是基于vue2搭建的。 之前一直是采用一个.env文件来存储变量,然后在打包的时候修改.env文件中对应的变量的值。 但是这样做现阶段有两个小问题:
652 0
|
NoSQL JavaScript 数据可视化
SpringBoot整合Freemaker结合Vue实现页面填写一键自动生成Redis的配置文件
SpringBoot整合Freemaker结合Vue实现页面填写一键自动生成Redis的配置文件
191 0
|
8月前
|
Web App开发 缓存 前端开发
VUE-CLI可选的配置文件vue.config.js
VUE-CLI可选的配置文件vue.config.js
89 0
|
3月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
179 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
JavaScript 小程序
VUE3(三十五)vite构建的项目配置使用.env文件
VUE3(三十五)vite构建的项目配置使用.env文件如标题所示:我要在vue3项目使用.env文件。 先介绍一下项目背景,项目使用VUE3.2 + vite2.9 + typescript搭建。 我基本断定,vue3使用.env文件的方法可能和vue2使用.env文件的方法可能是不同,关于vue2项目如何使用.env文件,请移步《VUE2(七)VUE配置env文件使用》
436 1
|
JavaScript
Vue下载及配置(Vue文件和路由文件)
Vue下载及配置(Vue文件和路由文件)
|
JavaScript 前端开发 应用服务中间件
nginx部署vue前端项目时,配置文件
nginx部署vue前端项目时,配置文件
159 0
|
JavaScript 前端开发
在零配置的情况下,怎么启动、打包一个.vue文件?
在零配置的情况下,怎么启动、打包一个.vue文件?
209 0
在零配置的情况下,怎么启动、打包一个.vue文件?
|
缓存 JavaScript 前端开发
Vue 新增不参与打包的接口地址配置文件
Vue 新增不参与打包的接口地址配置文件
222 0
|
JavaScript 安全 前端开发
vue打包以后,如何配置文件修改全局接口地址
vue打包以后,如何配置文件修改全局接口地址
vue打包以后,如何配置文件修改全局接口地址