在Vue項目中,我們通常將CSS文件單獨存放,然后通過<link>標簽引入。但是在引入的時候,我們需要注意CSS的根路徑。
<link rel="stylesheet" href="/css/style.css">
上面的代碼中,"/"表示CSS文件的根路徑。在Vue項目中,如果我們沒有設置根路徑,那么根路徑就是我們的html文件所在的目錄。但是,如果我們的CSS文件不在html文件所在的目錄下,那么就需要設置正確的根路徑。
Vue中設置CSS根路徑的方式如下:
// vue.config.js module.exports = { publicPath: "./", }
上面的代碼中,publicPath屬性用來設置CSS的根路徑。如果想讓CSS文件的根路徑指向項目的根目錄,可以將publicPath設置為"/"。
在設置好CSS的根路徑之后,就可以正常引入CSS文件了:
<link rel="stylesheet" href="/dist/css/style.css">
上面的代碼中,"/dist/"表示CSS文件所在的目錄,而"/"則表示項目的根目錄。
設置好CSS的根路徑后,就可以輕松管理我們的CSS文件了,避免因為路徑問題造成的不必要麻煩。
上一篇vue改css屬性值