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

Crazy_Coder 发布于2019-08-23 11:27 / 3421人阅读

摘要：如何配置中的路径别名前段时间更新电脑重装了一下，发现了已经更新到版。那么怎么在中配置路径别名呢创建项目在根目录下新建修改之所以用，是因为偷了个懒利用中中已经配好的路径有兴趣的可以进入文件里面看一看参考文档相关简单的配置方式

如何配置vue-cli 3中vue.config.js的路径别名？

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

1. 创建项目 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$",
          options.runtimeCompiler
            ? "vue/dist/vue.esm.js"
            : "vue/dist/vue.runtime.esm.js"
        )
···

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

专线服务 idc机房托管 linux磁盘sda配置别名路径配置文件 mysql路径配置 linux 路径配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96992.html

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

摘要：如何配置中的路径别名前段时间更新电脑重装了一下，发现了已经更新到版。那么怎么在中配置路径别名呢创建项目在根目录下新建修改之所以用，是因为偷了个懒利用中中已经配好的路径有兴趣的可以进入文件里面看一看参考文档相关简单的配置方式如何配置vue-cli 3中vue.config.js的路径别名？前段时间更新电脑重装了一下vue-cli，发现了vue-cli已经更新到3.0版。用来搭建项目后...

cikenerd 2019-08-02 11:19 评论0 收藏0
基于vue-cli3.0的项目工程重新构建空白版，拿来即用

摘要：写在前面使用框架开发时，很多人会选择官方提供的脚手架，最新的已经更新到完全无配置，只需下载就能方便的使用构建的项目工程，但基础的并不能满足正常的项目开发，在开发中我们需要根据自己的习惯和业务功能而添加些基础功能。写在前面使用vue框架开发时，很多人会选择vue官方提供的cli脚手架，最新的cli已经更新到3.0完全无配置，只需下载就能方便的使用vuecli构建的项目工程，但基础的c...

xingpingz 2019-08-26 10:33 评论0 收藏0
vue-cli 3.0 使用

摘要：安装如果想要使用首先需要全局安装，前提要求版本必须是及以上默认会覆盖，如果想要在使用版本的时候同时使用版本，那么执行以下命令该命令是安装一个桥接工具，版本的命令依然会被保留创建也可以通过命令打开一个图形化界面进行配置配置在版本中会安装如果想要使用vue cli 3.0 首先需要全局安装，前提要求Node.js版本必须是8.0及以上 npm install -g @vue/cli v...

PumpkinDylan 2019-08-23 15:14 评论0 收藏0
基于vue-cli3.0构建功能完善的移动端架子

摘要：对应每一个环境可能都会有所差异，比如说服务器地址接口地址地址等等。具体的值取决于应用运行的模式。会和中的选项相符，即你的应用会部署到的基础路径。基于vue-cli3.0构建功能完善的移动端架子，主要功能包括 webpack 打包扩展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局跨域设置 eslint设置...

Loong_T 2019-08-23 17:05 评论0 收藏0
vue-cli3.0初体验～

摘要：比如传递给时，使用。为所有的及其预处理文件开启。在生产环境下为和使用在多核机器下会默认开启。是否使用分割供应的包也可以是一个在包中引入的依赖的显性的数组。查阅配置行为。之前因为parcel的出现，webpack也跟进了零配置vue-cli自然也不能落下,cli3.0也升级到webpack4，并增加许多新特性安装并创建一个项目支持npm和yarn npm install -g @v...

AlphaWallet 2019-08-22 15:57 评论0 收藏0