vue.config.js 相关配置

vue-cli4脚手架搭建完成后,项目目录中没有 vue.config.js 文件,需要手动创建
vue.config.js(相当于之前的webpack.config.js) 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。下面是vue.config.js的相关配置

const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');

module.exports = {
  //执行 npm run build 统一配置文件路径(本地访问dist/index.html需'./')
  //NOOE_ENV:Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境
  //publicPath:'/'
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
  outputDir: 'dist',//输出文件目录
  assetsDir: 'assets',//放置生成的静态资源(js,css,img,fonts)
  
  //indexPath指定生成的输出路径(相对于outputDir).也可以是一个绝对路径
 // indexPath:'index.html',//可以不设置一般会默认
 // filenameHashing:true,//文件命名中是否包含了hash以便更好的控制缓存(必须是在默认的情况下生成的index.html)
  lintOnSave: false,//设置是否在开发环境下每次保存代码时都启用eslint验证
  runtimeCompiler:false,//是否使用带有浏览器内置编译的完整构建版本(会让应用额外的增加10kb左右)
  productionSourceMap:false,//如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
  
  css: {
    requireModuleExtension:true,//启用css预加载
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtoviewport({
            viewportWidth: 375,
            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
            viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
            selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
            mediaQuery: false // 允许在媒体查询中转换`px`
          })
        ]
      }
    }
  },
  devServer:{
      open:false,//编译完成是否打开网页,
      host:'0.0.0.0',//指定使用地址,默认localhost,0.0.0.0代表可以被外界访问
      port: 1882,//访问端口
      https:false,//用于设置是否启用https
      hot:true,//开启热加载
      inline:true,//用于设置代码保存时是否自动刷新页面
      
      //注: gzip 压缩 用于减少服务器向前端传输的数据量,提高浏览的速度。
      //compress:true,//对devServer 所有服务启用 gzip 压缩
      
      //注意:需要配合 open来使用。如果Vue router 为 hash mode。应在url前面补上/#。如:openPage: '/#/about'
     // openPage:'/differenet/page',//指定deserver编译后自动打开页面
     
     
     // headers:{//在所有响应中添加首部内容
     //     'X-Custom-Foo':'bar'
     // }
     
     //overlay:true,//当出现编译器错误或警告时,在浏览器中显示全屏覆盖层。默认禁用。
     // overlay:{
     //     warning: true,
     //     errors:true,
     // }
     proxy:{
         '/api':{//代理器中设置/api,项目中请求路径为/api的替换为target
             //代理地址,这里设置的地址会代替axios中设置的baseURL
             target:'XXXXXX', //使用url模块解析url字符串,目标服务器域名例如:https://testretail.sdeerlive.com/
             ws:true,//开启ws,如果是http代理此处可以不用设置
             
             //默认值:false 将主机标头的原点更改为目标URL
             changeOrigin: true,//如果接口跨域,需要进行这个参数配置
             
             //忽略api
             pathRewrite:{
                 '^/api': '/',
                 //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                 //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
             }
         }
     }
  }
};
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,576评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,515评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,017评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,626评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,625评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,255评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,825评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,729评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,271评论 1 320
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,363评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,498评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,183评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,867评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,338评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,458评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,906评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,507评论 2 359

推荐阅读更多精彩内容