vue項目,webpack中配置src路徑別名及使用

默認會有‘@’別名,指向src目錄,還可以添加自定義別名等等。

使用方法
使用別名一般就三種情況:在js中用,在css中用,在html文檔內用
js中用,最簡單:

import {getName} from '@/util/name'


css中使用,需要加入“~”,并且不要寫成字符串:

{background: url(~@/assets/img/04_2.jpg);background: url('~@/assets/img/04_2.jpg');//錯了,這里有個坑,不能寫成字符串,我就是因為這樣寫錯了
}


html中使用,可以加入‘~’也可以不加入‘~’。

 <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">


生產包遇到路徑問題
相信你看到這里,也曾經無數次npm run build,在很多問題中就是因為路徑出現問題。
共享一個碰到的坑:
在config/index.js內可以設置打包后根目錄,例如:

build: {index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/foreEnd/',//設置資源訪問時前綴,當設置后,例如圖片,css,js等文件的路徑就會變為/foreEnd/……的絕對路徑,你可以設置為‘./’保持相對路徑。


圖片以及一些靜態資源盡量放入src/assets目錄內,不要放入static目錄內,訪問不易出錯。以@/assets/……方式訪問。
在寫路徑時候,盡量不要使用絕對路徑,請使用@別名方式訪問資源。

?

在js文件或者vue文件的script標簽中使用:

(1)、js文件中導入示例:

(2)、vue文件中導入示例:

css(scss)文件在scss或者vue的style標簽中導入示例:

(1)、在scss文件中導入示例:

(2)、在vue的style標簽中導入示例:

注意:css或者scss樣式導入需要使用?~@?開頭。

在vue的template模板標簽中引入圖片路徑示例(兩種方式均可使用):

(1)、使用?~@?方式引入:

(2)、使用?@?方式引入:

(3)、在scss 自定義方法中使用時必須使用 ~@ 方式引入:

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247391.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247391.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247391.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

fastclick庫的介紹和使用

移動端點擊延遲事件 1. 移動端瀏覽器在派發點擊事件的時候&#xff0c;通常會出現300ms左右的延遲 2. 原因: 移動端的雙擊會縮放導致click判斷延遲 fastclick 是具有消除移動端瀏覽器上的點擊事件的 300ms 的延遲的作用。 注意幾點 1、PC端無效 2、Android 上的 Chrome …

toString()和String.valueOf()的區別(轉)

慣例廣告一發&#xff0c;對于初學真&#xff0c;真的很有用www.java1234.com&#xff0c;去試試吧&#xff01; 有的朋友在用這兩個的時候感覺差不多 其實&#xff0c;很多時候效果是差不多的 但是&#xff0c;有的時候用.toString()會報錯&#xff0c;而用String.valueOf()就…

kylin框架中使用postcss-px2rem

1.kylin框架的使用不做介紹 2.頁面中 html模板頁面中已經使用clientWidth/375*100px,已經賦值了html的fontsize隨頁面寬度而變化。 比如寬度375的屏 html的fontsize為100px kylin加載postcss-px2rem cnpm i --save-dev postcss-px2rem 在根目錄下的plugin.js中 var px2rem…

VS2005無法啟動解決方法(轉)

一直有一個問題困擾&#xff0c;VS2005用得好好滴&#xff0c;突然有一天開始就進不去了&#xff0c;啟動了以后&#xff0c;沒有任何界面的出現&#xff0c;但是打開任務管理器&#xff0c;卻能夠看到進程的存在&#xff0c;真是奇怪了&#xff0c;我試圖卸載并且重新安裝&…

kylinH5框架之項目組件理解

目錄 組件介紹 組件聲明結構 組件接口 script dependency template style 狀態注入 接口聲明 組件介紹 Component 擴充自 Vue 的組件, 提供了 Vue 組件對等的輸入參數能力。在代碼書寫時提供類 class 的裝飾器 Decorator 風格。 import { Component, Watch } from al…

Markdown 語法簡介

這是標題一 標題二 標題三 print(hello) 這是一個python 第一點 thiw dhaishd 第二點 轉載于:https://www.cnblogs.com/BlogOfEr/p/11229682.html

kylinH5框架之項目開發調試

進行開發調試&#xff0c;需要完成以下步驟&#xff1a; 安裝依賴開發調試構建生產 點擊 代碼示例&#xff0c;獲取 Kylin Demo&#xff0c;并完成以下操作。 安裝依賴 進入項目根目錄&#xff0c;使用 cnpm 安裝 npm 依賴&#xff1a; # 安裝npm依賴 cnpm install 開發調試…

Java生鮮電商平臺-深入訂單拆單架構與實戰

Java生鮮電商平臺-深入訂單拆單架構與實戰 Java生鮮電商中在做拆單的需求&#xff0c;細思極恐&#xff0c;思考越深入&#xff0c;就會發現里面涉及的東西越來越多&#xff0c;要想做好訂單拆單的功能&#xff0c;還是相當有難度&#xff0c; 因此總結了一下拆單功能細節&…

python3中Requests將verify設置為False后,取消警告的方式

import requests resp requests.get(https://www.***.com, verifyFalse)調用成功但是會有如下警告信息&#xff1a; InsecureRequestWarning: Unverified HTTPS request is being made. Adding certificate verification is strongly advised. See: https://urllib3.readthedo…

kylinH5框架之項目腳手架

頁面介紹 Page 是一個 Webview 的邏輯抽象層&#xff0c;同時也是組件掛載的根節點。 代碼引入 import { Page } from ali/kylin-framework; 頁面聲明結構 一個Page包含的接口在頁面接口中聲明&#xff0c;提供了對 Vue 實例的完整控制能力&#xff0c;簡易的 Page 使用如…

博弈論學習筆記

決定近段時間復習一下博弈論順便寫點筆記。 大佬博客&#xff1a;幾種常見博弈模型https://blog.csdn.net/wr132/article/details/51213331 SG函數與SG定理https://www.cnblogs.com/ECJTUACM-873284962/p/6921829.html 無敵的博弈總結https://blog.csdn.net/acm_cxlove/article…

Promise鏈式調用和解決回調地獄的ES7終極解決方法async,await

promise鏈式調用 **then 是成功回調&#xff0c;只要在then后邊return一個promise就可以繼續then**<script type"text/javascript">let p1new Promise(function(resolve,reject){setTimeout(function(){resolve()//成功回調// reject()//失敗回調},2000)//2秒…

1.MySQL目錄結構

分為兩個目錄&#xff1a; 1.安裝目錄&#xff1a; 2.數據目錄&#xff1a; 在Linux下 yum安裝mysql后使用 find / -name my.cnf 找到mysql數據文件的位置 轉載于:https://www.cnblogs.com/sdrbg/p/11237231.html

對promise.all底層的實現的研究

1.Promise.all(iterable)返回一個新的Promise實例,此實例在iterable參數內素有的Promise都fulfilled或者參數中不包含Promise時&#xff0c;狀態變成fulfilled。 如果參數中Promise有一個失敗rejected &#xff0c;此實例回調失敗&#xff0c;失敗原因的是第一個失敗Promise的返…

vue-provide/inject輕松實現跨級訪問祖先組件

provide&#xff1a;Object | () > Object inject&#xff1a;Array<string> | { [key: string]: string | Symbol | Object } provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。是2.2.0版本 新增的。 這對選項需要一起使用&#x…

python 操作redis,存取為字節格式,避免轉碼加

這種情況連接數據庫&#xff0c;對數據的存取都是字節類型&#xff0c;存取時還得轉碼一下 from redis import Redis# 實例化redis對象rdb Redis(hostlocalhost, port6379, db0,passwordaaa123) rdb.set(name, root) name rdb.get(name) print(name)為了避免上述情況&#x…

element ui table scrollTop 滾動到行頭或行尾

1.設置table的ref為tableList2.設置滾動至頂部this.$refs.tableList.bodyWrapper.scrollTop 0;3.設置滾動至底部this.$refs.tableList.bodyWrapper.scrollTop this.$refs.tableList.bodyWrapper.scrollHeight;//如果請求完更新數據&#xff0c;需要使用$nextTick this.$nextTic…

Element-UI中Drawer抽屜去除標題自帶藍色框

當點擊事件drawertrue時&#xff0c;抽匣回打開 這時抽匣的標題會出現一個難看的藍色邊框&#xff0c;一會就會消失&#xff0c;但是好丑&#xff0c;所以要去掉它 解決方法 /deep/ :focus {outline: 0;} vue組件中&#xff0c;在style設置為scoped的時候&#xff0c;里面在…

Java生鮮電商平臺-B2B生鮮的互聯網思維

Java生鮮電商平臺-B2B生鮮的互聯網思維 在互聯網高速發展的今天&#xff0c;為我們的生活帶來了眾多便利。然而互聯網從早期的萌芽狀態到現在婦孺皆知&#xff0c;它的崛起速度遠遠超乎世人的想象。人們開始關注互聯網并且研究它&#xff0c;而思維模式的研究則是從深層次研究事…

Java生鮮電商平臺-高并發核心技術訂單與庫存實戰

Java生鮮電商平臺-高并發核心技術訂單與庫存實戰 一、 問題 一件商品只有100個庫存&#xff0c;現在有1000或者更多的用戶來購買&#xff0c;每個用戶計劃同時購買1個到幾個不等商品。 如何保證庫存在高并發的場景下是安全的&#xff1f; &#xff08;1&#xff09;不多發 &…