vue-cli搭建的项目,一般会使用到以下配置:
配置目录别名
build目录下的webpack.base.conf.js文件中配置别名alias,具体配置如下:
这样配置后,我们在任何目录等级下的文件中引入components文件夹下的文件,都可以不用写相对路径,改写成什么呢,改写成components/search/searc.vue;比如components文件夹下有a组件和b组件,a组件想要引入b组件,压根不用管a组件所在的文件夹 跟 b组件所在的文件夹有从几层关系,直接可以在a组件中这样写import b from 'components/b组件的目录'
那如果common目录下,我们封装了很多通用的css和js,js和上面一样;css的引入跟js还不太一样。比如我们想在任意组件的style标签中 引入common/style/base.css,那么引入方式为@import "~common/style/base.css" ,注意前面的“~”;当然一个通用样式,我们也可以在main.js中引入,引入方式是@import "common/style/base.css";注意两种方式的区分。
跨域请求的配置
比如我们自己在Easy Mock上创建了一些假数据,页面中如何请求到easy mock中的假数据呢?
需要修改 config目录下的index.js文件,修改proxyTable参数,实例如下:
开发环境下,当我们去请求/aaa的目录时,webpack-dev-server会将请求转发至target对应的目录下,比如我请求的地址是 /aaa/first/test,该代理会将“/aaa”替换成“ ”,实际请求的地址被转发至'https://www.easy-mock.com/mock/5d244684f8d8464998ec7340/api/first/test'