vue-cli3+工具中，配置路径别名(vue.config.js)

vue-cli 2.x 版本创建项目时，我们可以在 build 文件夹下找到 webpack.base.conf.js 文件，在里面修改 resolve.alias 即可。

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

但是vue-cli 3.0 创建项目时，目录结构精简化，找不到 build 和 config 文件夹，那么该如何修改路径别名呢？

只需要在项目根目录下，新建vue.config.js文件，代码如下：

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


module.exports={
   
    chainwebpack:(config)=>{
        config.resolve.alias
        //set第一个参数：设置的别名，第二个参数：设置的路径
        .set('@',resolve('./src'))
        .set('components',resolve('./src/components'))
        .set('assets',resolve('./src/assets'))
        .set('views',resolve('./src/views'))
        .set('network',resolve('./src/network'))
        //注意 store 和 router 没必要配置
　　　　
    }
}

配置好想用的路径别名后，重新启动项目，再引入文件时，使用别名即可配置路径前：

import my from "../views/my/My.vue";

配置路径后(不用再担心文件层级关系)：

import my from "views/my/My.vue";

注意，引用别名时如果是html中的路径，则需要在别名前面加符号~

  <img src="~assets/img/tabbar/home.svg" alt="" slot="item-icon">

资源搜索网站大全 http://www.szhdn.com 广州VI设计公司https://www.houdianzi.com

图片问题：

在做Vue项目的时候，由于项目需求，需要动态绑定img的src时，突然发现如果说是直接请求后台接口的图片地址就能显示，但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候，图片不能显示。

html代码：

<img :src="MyimgSrc" alt="">

js代码：

 this.MyimgSrc = 'assets/jd/market/img/temp/icon_yj.png'
 
/* 或者 this.MyimgSrc = '~assets/jd/market/img/temp/icon_yj.png'*/

解决方法：

当在给数据MyimgSrc 设置绝对路径或者是相对路径时应该使用require引入才能成功

this. MyimgSrc = require('assets/jd/market/img/temp/icon_yj.png')

注意：当图片通过require 引入时，路径前面不能加@ 或者 ~

vue-cli3+工具中，配置路径别名(vue.config.js)

图片问题：

相关推荐