亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue配置根目錄詳細(xì)步驟(用@代表src目錄)

 更新時(shí)間：2022年07月10日 09:47:51   作者：IT利刃出鞘  
vue用@表示src文件夾，引入時(shí)找文件路徑更方便,下面這篇文章主要給大家介紹了關(guān)于vue配置根目錄(用@代表src目錄)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

簡(jiǎn)介

本文介紹vue如何配置根目錄（用@代表src目錄）。

默認(rèn)情況下是不能用@代替/src的，需要經(jīng)過(guò)配置才可以。

根目錄的用法

在Vue中的JS里使用

vue通常會(huì)用@來(lái)代表項(xiàng)目的src目錄。這樣一來(lái)，輸入路徑時(shí)就不用輸入/src了，可以直接用@來(lái)替換。

例如：有一個(gè)vue文件，路徑為：/src/layout/index.vue，如下圖所示：

如果直接導(dǎo)入，則代碼應(yīng)該這么寫(xiě)：

import Layout from '/src/layout'

如果使用@來(lái)替換，就更簡(jiǎn)潔了：

import Layout from '@/layout'

在Vue文件的CSS里使用

可以這樣使用：

<div class="login-center-left">
    <h2><img src="@/assets/logo.png" />{{ title }}</h2>
</div>

注意

vue文件里style的css中不能使用@來(lái)獲取路徑，CSS loader 會(huì)把把非根路徑的url解釋為相對(duì)路徑。

解決方案：加~前綴（~@代表根路徑） 。即：加~前綴才會(huì)解釋成模塊路徑

例如：

background: rgb(73, 123, 199) url("~@/assets/login-bg.png") left center

vue cli3及之后的配置

步驟1：配置jsconfig.js

位置：項(xiàng)目根目錄/jsconfig.js

{ 
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  // @ 不能在以下目錄的文件中使用
  "exclude": ["node_modules", "dist"]
}

步驟2：配置vue.config.js

位置：項(xiàng)目根目錄/vue.config.js

法1：配置chainWebpack

'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
 
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
    }
}

法2：配置configureWebpack

'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
 
module.exports = {
  configureWebpack: {
    name: 'vue Element Admin',
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

vue cli2的配置

webpack.base.conf（位置：項(xiàng)目根目錄/config/webpack.base.conf）

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        '#'：resolve('statis')
    }
}

總結(jié)

到此這篇關(guān)于vue配置根目錄(用@代表src目錄)的文章就介紹到這了,更多相關(guān)vue配置根目錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論