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

前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版。用来搭建项目后发现简化了很多,而且配置文件现在可以全部统一在vue.config.js中,很方便有没有,从此以后一个配置文件走遍公司大小项目,妈妈再也不用担心我每次新建项目时重新配置各个复杂的选项了。那么怎么在vue.config.js中配置路径别名呢?

2. 在根目录下新建 vue.config.js

3. 修改vue.config.js

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views',
      }
    }
  },
}

之所以用'@/assets',是因为偷了个懒利用3.x中/node_modules/@vue/cli-service/lib/config/base.js中已经配好的@路径,有兴趣的可以进入文件里面看一看

···
    webpackConfig.resolve
      .set('symlinks', false)
      .extensions
        .merge(['.js', '.jsx', '.vue', '.json'])
        .end()
      .modules
        .add('node_modules')
        .add(api.resolve('node_modules'))
        .add(resolveLocal('node_modules'))
        .end()
      .alias
        .set('@', api.resolve('src'))
        .set(
          'vue/div>,
          options.runtimeCompiler
            ? 'vue/dist/vue.esm.js'
            : 'vue/dist/vue.runtime.esm.js'
        )
···

参考文档: vue-cli3 webpack 相关简单的配置方式webpack resolve.alias

原文链接:segmentfault.com

上一篇:一款开源的微信小程序APP(门店营销类)
下一篇:【前端工程师手册】css会阻塞页面dom解析吗?javascript呢?

相关推荐

  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设...

    1 年前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    9 个月前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    8 个月前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    8 个月前
  • 鼠标移入移出效果 -- jQuery/Vue版

    元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接(http://www.bestvist.com/p/56) ...

    2 年前
  • 麻雀虽小五脏俱全的Vue拉勾项目,看看应该有帮助

    全栈系列Vue版拉勾,客官们来瞧瞧 模拟拉勾app系列vue前端界面 github地址,来猛戳吧(https://github.com/qianbin01/lagouvue) 前言 本项目...

    1 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)

    前言 事实上, 只有的最终用户响应时间是发在从Web服务器获取HTML文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间,就必须关注剩余的最终用户体验。

    10 个月前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前

官方社区

扫码加入 JavaScript 社区