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 基础配置

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

打包自动加入公用样式css

less 配置自动导入

配置css

开发环境搭建代理

完整配置

发表我的评论

Hi，您需要填写昵称和邮箱！