一、目录结构

二、配置方法

提示:和package.json同级新建vue.config.js文件(可选文件,默认没有创建)。

const path = require('path');//引入path模块
function resolve(dir){
return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
module.exports={
chainWebpack:(config)=>{
config.resolve.alias
.set('@',resolve('./src'))
.set('components',resolve('./src/components'))
.set('views',resolve('src/views'))
.set('assets',resolve('src/assets'))
//set第一个参数:设置的别名,第二个参数:设置的路径
    
}
}

Vue-Cli4.x配置文件路径别名的更多相关文章

  1. 【vue-cli 3.0】 vue.config.js配置 - 路径别名

    如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...

  2. vue项目中的路径别名

    每次写引入组件的路径,如果路径嵌套比较深,那么会比较麻烦,我们可以在webpack.base.conf.js,中设置路径的别名,默认webpack设置src的别名为@ 建议配置src下一级目录的别名, ...

  3. vue.config.js添加路径别名

    在组件库中添加配置文件后其它文件需要引用它,此时想到利用路径的别名比较方便,相当于缩写了,请看下面的添加过程: (一)在vue.config.js文件中添加的内容如粗体字体所示: const path ...

  4. VueCli4构建项目如何配置文件路径别名?

    1.在项目文件根目录上创建 vue.config.js 文件 2.写入以下代码,具体内容见注释: const path = require('path') // 引入path模块 function r ...

  5. 让webstorm 识别vue cli3项目中的@路径别名

    在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...

  6. webstorm中不能识别react、vue alias 路径别名符号

    https://blog.csdn.net/weixin_37939942/article/details/89388466 因为我平时比较喜欢使用ws做开发,所以在使用vue或react的时候只要使 ...

  7. vue配置config ‘./.../.../***/**.vue’路径别名

    cli-4的脚手架配置 因为组件的引用,经常会遇到import * from  '../../../components/common/***.vue‘这样的引入格式,太复杂了,所以可以在vue里面配 ...

  8. 基于webpack的vue项目路径别名

    在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件: import userinfo from '../../../components/userinfo.vue'; 使用.. ...

  9. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

随机推荐

  1. 输入一个整数n,输出契波那契数列的第n项

    package bianchengti; /* * 输入一个整数n,输出契波那契数列的第n项 * 斐波那契数列:1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89... */ p ...

  2. jsp 判断时间大小

    jsp 判断时间大小 <% SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date ...

  3. codeforces Gym - 101485 D Debugging (2015-2016 Northwestern European Regional Contest (NWERC 2015))

    题目描述: 点击打开链接 这题题意其实很不好理解,你有一个n行的程序,现在程序运行了r时间之后停止了运行,证明此处有一个bug,现在你需要在程序中加printf来调试找到bug所在的位置,你每次加一个 ...

  4. J2EE项目中,servlet跳转到相应的JSP页面后,JSP页面丢失了样式效果

    原因: js和css的引用路径是相对路径.跳转后路径改变. 解决方法: 先在head标签中加入一下代码 <% String path = request.getContextPath(); St ...

  5. 手把手教你Windows Linux双系统的安装与卸载

    作者:-叶丶知秋 链接:https://blog.csdn.net/fanxueya1322/article/details/90205143 转载请保留出处 良许前言: 后台突然有很多小伙伴留言想看 ...

  6. 使用VuePress搭建个人博客

    使用VuePress搭建个人博客 VuePress 是一个基于 Vue 的静态网站生成器.其中主要用到:Vue,VueRouter,Webpack. 类似的工具:hexo 基于 Markdown 语法 ...

  7. 16 . PythonWeb框架之Django

    Web框架简介 Web开发是Python语言应用领域的重要部分,也是目前最主要的Web开发语言之一,在其二十多年的历史中出现了数十种Web框架,比如Django.Tornado.Flask.Twist ...

  8. RabbitMQ 高级应用

    本文是作者原创,版权归作者所有.若要转载,请注明出处. 本文RabbitMQ版本为rabbitmq-server-3.7.17,erlang为erlang-22.0.7.请各位去官网查看版本匹配和下载 ...

  9. Rocket - diplomacy - AddressAdjuster

    https://mp.weixin.qq.com/s/X0s5CWN84GEiwpNR7tiRgA 基于AddressAdjuster介绍LazyModule的实现.   参考链接:https://g ...

  10. 面试问题---JAVA程序CPU占用过高怎么定位

    今天一个电话面试问了这个问题.回来查了下答案,自己也顺带操作一遍,做个记录.之前知道jstack工具可以查看线状态这些.比如死锁这些,主要是之前不知道top -H -p pid这个命令的使用,这命令可 ...