百网思正是上线了。欢迎围观

vue3.0+cli 4 .0^ 单页面配置系列(二)--vue.config.js 基础配置

js admin 3086浏览 0评论

vue.config.js 是一个可选的配置文件,在安装cli的时候并不会自动生产,需要使用的时候自己手动编写,名字不能错,放在更目录下面,它会被 @vue/cli-service 自动加载,执行; 详细的介绍见官网,初略使用看下面 由于使用的官网cli很多都帮我们处理好了。以后在写自定义脚手架

打包自动加入公用样式css

环境变量一节介绍分离不同的配置文件,自动加入公用样式比如定义变量和公用样式放到一个less文件comm.less, 这个文件生产和开发环境都需要,就配置在base.config.js 中,这个文件需要遵循vue.config.js的配置规则

less 配置自动导入

需要用到less 预处理,首先需要安装

npm install -D less-loader less

配置css

安装好之后,开始打开配置文件base.config.js,进行如下配置

module.exports = {
  configureWebpack:{
    // 配置别名
    resolve:{
      alias: {
        '@': resolve('src'),
      }
    }
  },
  css:{
    loaderOptions:{
      less:{
      // 这里就是在每个地方都引入comm.less ~是为了区分用的
        additionalData: `@import "~@/assets/css/comm.less";`
      }
    }
  }
}

首先确保存在文件comm.less ,里面是公用的变量或者要样式书写,具体内容自己定义, 关于别名 @ 表示的是从 src目录开始查找,省掉了从根目录下开始书写或者...操作 loaderOptions.less{} 其实是传递参数到 less-loader 去执行的,更详细的可以去看啊预处理 less-loader

开发环境搭建代理

流行的前后端分离,通常前端应用和后端 API 服务器没有运行在同一个主机上,这个时候开发前端应用调用后端接口就需要代理 通过 devServer.proxy 去实现 支持 webpack-dev-server 的所有参数: 由于才有分离配置文件。因此打开 dev.config.js 在里面配置就好

devServer:{
    proxy:{
    '/api':{
      target:'http://192.168.12.565:8000'
    }
   }

习惯上用上面的的格式 target 后面 是代理的目标地址 和服务端口号。 在本机执行 /api/list 则会代理到 http://192.168.12.565:8000/api/list

如果不希望每次都传递 /api 可以重写 如:

devServer:{
    proxy:{
    '/api':{
      target:'http://192.168.12.565:8000'
      pathRewrite: {'^/api' : ''}
    }
   }

这样请求的时候直接 /list 实际 执行的是http://192.168.12.565:8000/api/list

常用的还有一个参数:

changeOrigin: true

默认情况下,代理时会保留主机头的来源,可以将 changeOrigin 设置为 true 以覆盖此行为,这样别人就不知道你代理的地址是哪里?很好的保护了因隐私

关于其他的vue.config.js 使用过默认的就可以完成任务

完整配置

base.config.js

let path = require('path');
let resolve = function (dir) {
  return path.join(__dirname, '..', dir);
};
module.exports = {
  configureWebpack:{
    // 配置别名
    resolve:{
      alias: {
        '@': resolve('src'),
      }
    }
  },
  css:{
    loaderOptions:{
      less:{
        additionalData: `@import "~@/assets/css/comm.less";`
      }
    }
  }
}

dev.config.js

const merge = require('webpack-merge');
const baseconfig = require('./base.config');
let devConfig ={
  publicPath:'/',
  devServer:{
    proxy:{
    '/api':{
      target:'http://127.0.0.1:8000'
    }
   }
  }
}
module.exports = merge(baseconfig,devConfig)

production.config.js

module.exports = {
  publicPath:'/bwsmwhtml/',
  css:{
    extract:true,
  }
}

转载请注明: 百网思 » vue3.0+cli 4 .0^ 单页面配置系列(二)--vue.config.js 基础配置

喜欢 (9) or 分享 ( 0)

发表我的评论

您尚未登录,请 登录注册 后评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(0)个小伙伴在吐槽