四时宝库

程序员的知识宝库

vue-cli3 配置路径别名(vue配置@路径)

最近用Vue Cli3脚手架搭建了Vue项目,发现没有build目录了,里面的webpack相关的也没了,看了官方文档后,查了资料后,发现都在vue.config.js里来配置了

1.先在项目根目录下创建vue.config.js文件

2.然后在文件里输入下面代码

const path = require('path')

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    lintOnSave: true,
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('base', resolve('src/base'))
            .set('views',resolve('src/views'))
            .set('common', resolve('src/common'))
            .set('components', resolve('src/components'))
    }
}

3.组件中使用

import appBar from 'base/bar'
import appGrid from 'base/grid'
import appHeader from 'base/header'
import appBanner from 'components/banner'
import appListView from 'components/list'


4.注意事项

vue.config.js文件创建完后,不需要什么操作,@vue/cli-service会自己识别,如果出现报错等等,可以先尝试重启下IDE或者启动下项目

vue.config.js在vue项目创建后,默认是没有的,是一个可选的文件

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接