vue-cli 配置路径 及 @,~,~@的使用

1.vue-cli2自定义 配置路径

vue-cli2 需要在build的webpack.base.conf.js内设置

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

2.vue-cli3自定义 配置路径

vue-cli3 需要在build的webpack.base.conf.js内设置

const path = require('path');
function resolve(dir){
    
    
    return path.join(__dirname,dir)//设置绝对路径
}


module.exports={
    
    
   
    chainWebpack:(config)=>{
    
    
        config.resolve.alias
        .set('@',resolve('src'))//参数1,设置的别名,参数2：设置的路径
    }
}

3.@ 与 ~ 的使用

@与~都是 路径别名，方便我们引用文件。
@主要使用在js与html内，~则是在@之前添加~,即~@,主要用于css引用和html内。

@使用例子

js里需要引用文件

//引用组件
import Details from "@/components/system/equipment/details.vue";
// 引用图片资源
require("@/assets/images/map/gz_big1.png"),
//main.js  引入全局样式
import '@/assets/iconfont/iconfont.css'
html 里的使用
<img  src="@/assets/images/map/point.png" >

~@使用例子

// css里引用样式文件
<style lang="less" scoped>
@import "~@/assets/css/NoRouterPopup.less";
</style>

//css内 引用图片 （可写在''字符串内，也可以不写在字符串里面）
background: url(~@/assets/images/map/point.png);
background: url('~@/assets/images/map/point.png');

html 里的使用
<img  src="~@/assets/images/map/point.png" >