vue cli專案中使用別名 「 」和「 」的坑

2021-10-01 15:35:32 字數 1361 閱讀 1897

vue專案中使用別名:「@」和「~」的坑

最經在專案中遇到乙個問題就是 在使用 vue-cli 構建工具時遇到的問題就是靜態資源引用的問題

了解別名的作用:@和~ 都是在路徑訪問時使用的

如何設定別名

在build資料夾下的webpack.base.conf.js檔案中設定src的路徑別名。

resolve:

}

缺省會有『@』別名,指向src目錄,還可以新增自定義別名等等。

使用方法

使用別名一般就三種情況:在js中用,在css中用,在html文件內用

js中用,最簡單:

import

from

'@/util/name'

css中使用,需要加入「~」,並且不要寫成 ''字串"

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

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/……方式訪問。 在寫路徑時候,盡量不要使用絕對路徑,請使用@別名方式訪問資源。

Vue cli專案中使用mockjs模擬資料

const mock require mockjs 獲取mock物件 const random mock.random 獲取random物件,隨機生成各種資料,具體請翻閱文件 const domain 定義預設網域名稱,隨便寫 const code 200 返回的狀態碼 隨機生成文章資料 const...

Vue cli搭建的專案中路徑別名的配置

首先展示一下專案結構 對照專案結構配置 在專案根目錄下建立vue.config.js檔案 module.exports 使用cli3.x建立的專案在配置路徑別名時可以使用 代表src,在node modules vue cli service lib config base.js檔案中已經配置好的使...

專案中使用spring和redis的整合

在專案中我使用的是spring內部整合的redis。不得不服,spring幾乎整合了當下所有流行的框架。從這上面看,當下流行的redis solr hadoop mongodb couchbase.全都收入囊中。對於redis整合而言,主要用到的是spring data redis 使用步驟 新增p...