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
}
}
}
}
};