vue项目配置

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参数,实例如下:

proxyTable配置

开发环境下,当我们去请求/aaa的目录时,webpack-dev-server会将请求转发至target对应的目录下,比如我请求的地址是 /aaa/first/test,该代理会将“/aaa”替换成“  ”,实际请求的地址被转发至'https://www.easy-mock.com/mock/5d244684f8d8464998ec7340/api/first/test'

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容