【vue-cli 3.0】 vue.config.js配置 - 路徑別名

cikenerd 發(fā)布于2019-08-02 11:19 / 482人閱讀

摘要：如何配置中的路徑別名前段時(shí)間更新電腦重裝了一下，發(fā)現(xiàn)了已經(jīng)更新到版。那么怎么在中配置路徑別名呢創(chuàng)建項(xiàng)目在根目錄下新建修改之所以用，是因?yàn)橥盗藗€(gè)懶利用中中已經(jīng)配好的路徑有興趣的可以進(jìn)入文件里面看一看參考文檔相關(guān)簡(jiǎn)單的配置方式

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

前段時(shí)間更新電腦重裝了一下vue-cli，發(fā)現(xiàn)了vue-cli已經(jīng)更新到3.0版。用來(lái)搭建項(xiàng)目后發(fā)現(xiàn)簡(jiǎn)化了很多，而且配置文件現(xiàn)在可以全部統(tǒng)一在vue.config.js中，很方便有沒(méi)有，從此以后一個(gè)配置文件走遍公司大小項(xiàng)目，媽媽再也不用擔(dān)心我每次新建項(xiàng)目時(shí)重新配置各個(gè)復(fù)雜的選項(xiàng)了。那么怎么在vue.config.js中配置路徑別名呢？

1. 創(chuàng)建項(xiàng)目 2. 在根目錄下新建 vue.config.js 3. 修改vue.config.js

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

之所以用"@/assets"，是因?yàn)橥盗藗€(gè)懶利用3.x中/node_modules/@vue/cli-service/lib/config/base.js中已經(jīng)配好的@路徑,有興趣的可以進(jìn)入文件里面看一看

···
    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 相關(guān)簡(jiǎn)單的配置方式
webpack resolve.alias

GPU云服務(wù)器云服務(wù)器 linux磁盤sda配置別名路徑配置文件 mysql路徑配置 linux 路徑配置

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/52916.html

相關(guān)文章

【vue-cli 3.0】 vue.config.js配置 - 路徑別名

摘要：如何配置中的路徑別名前段時(shí)間更新電腦重裝了一下，發(fā)現(xiàn)了已經(jīng)更新到版。那么怎么在中配置路徑別名呢創(chuàng)建項(xiàng)目在根目錄下新建修改之所以用，是因?yàn)橥盗藗€(gè)懶利用中中已經(jīng)配好的路徑有興趣的可以進(jìn)入文件里面看一看參考文檔相關(guān)簡(jiǎn)單的配置方式如何配置vue-cli 3中vue.config.js的路徑別名？前段時(shí)間更新電腦重裝了一下vue-cli，發(fā)現(xiàn)了vue-cli已經(jīng)更新到3.0版。用來(lái)搭建項(xiàng)目后...

Crazy_Coder 2019-08-23 11:27 評(píng)論0 收藏0
基于vue-cli3.0的項(xiàng)目工程重新構(gòu)建空白版，拿來(lái)即用

摘要：寫(xiě)在前面使用框架開(kāi)發(fā)時(shí)，很多人會(huì)選擇官方提供的腳手架，最新的已經(jīng)更新到完全無(wú)配置，只需下載就能方便的使用構(gòu)建的項(xiàng)目工程，但基礎(chǔ)的并不能滿足正常的項(xiàng)目開(kāi)發(fā)，在開(kāi)發(fā)中我們需要根據(jù)自己的習(xí)慣和業(yè)務(wù)功能而添加些基礎(chǔ)功能。寫(xiě)在前面使用vue框架開(kāi)發(fā)時(shí)，很多人會(huì)選擇vue官方提供的cli腳手架，最新的cli已經(jīng)更新到3.0完全無(wú)配置，只需下載就能方便的使用vuecli構(gòu)建的項(xiàng)目工程，但基礎(chǔ)的c...

xingpingz 2019-08-26 10:33 評(píng)論0 收藏0
vue-cli 3.0 使用

摘要：安裝如果想要使用首先需要全局安裝，前提要求版本必須是及以上默認(rèn)會(huì)覆蓋，如果想要在使用版本的時(shí)候同時(shí)使用版本，那么執(zhí)行以下命令該命令是安裝一個(gè)橋接工具，版本的命令依然會(huì)被保留創(chuàng)建也可以通過(guò)命令打開(kāi)一個(gè)圖形化界面進(jìn)行配置配置在版本中會(huì) 安裝如果想要使用vue cli 3.0 首先需要全局安裝，前提要求Node.js版本必須是8.0及以上 npm install -g @vue/cli v...

PumpkinDylan 2019-08-23 15:14 評(píng)論0 收藏0
基于vue-cli3.0構(gòu)建功能完善的移動(dòng)端架子

摘要：對(duì)應(yīng)每一個(gè)環(huán)境可能都會(huì)有所差異，比如說(shuō)服務(wù)器地址接口地址地址等等。具體的值取決于應(yīng)用運(yùn)行的模式。會(huì)和中的選項(xiàng)相符，即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑。基于vue-cli3.0構(gòu)建功能完善的移動(dòng)端架子，主要功能包括 webpack 打包擴(kuò)展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局跨域設(shè)置 eslint設(shè)置...

Loong_T 2019-08-23 17:05 評(píng)論0 收藏0
vue-cli3.0初體驗(yàn)～

摘要：比如傳遞給時(shí)，使用。為所有的及其預(yù)處理文件開(kāi)啟。在生產(chǎn)環(huán)境下為和使用在多核機(jī)器下會(huì)默認(rèn)開(kāi)啟。是否使用分割供應(yīng)的包也可以是一個(gè)在包中引入的依賴的顯性的數(shù)組。查閱配置行為。之前因?yàn)閜arcel的出現(xiàn)，webpack也跟進(jìn)了零配置vue-cli自然也不能落下,cli3.0也升級(jí)到webpack4，并增加許多新特性安裝并創(chuàng)建一個(gè)項(xiàng)目支持npm和yarn npm install -g @v...

AlphaWallet 2019-08-22 15:57 評(píng)論0 收藏0