vue.config.js常用配置-cli3.0

先给个官方文档的链接:https://cli.vuejs.org/zh/config/

'use strict'
const path = require('path');
const webpack = require('webpack');
const nowRun = process.env.VUE_APP_TITLE;//当前运行
const name = 'xxxAPP'; //浏览器头部得标题

function resolve(dir) {
  return path.join(__dirname, dir);  //用于快速引入文件
}
const port = process.env.port || process.env.npm_config_port || 9528; // dev port 配置端口

module.exports = {
	/* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
    /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',  // 部署应用时的基础路径
	outputDir: 'dist', //build时文件输出的目录
	assetsDir: 'public', //build时生成的相对于outputDir的静态资源的目录（js、css、img、font）
	indexPath: 'index.html', //可以不填,默认就是index.html 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
	//pages:{}, 这个针对于多页面,在这里就不说明了
	lintOnSave: false, //是否开启eslint保存检测，有效值：true、false、error  通常设置为false 然后在devServer 对象使用overlay单独设置
  	productionSourceMap: true,// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
	productionSourceMap: false, //是否在构建生产包时生成sourceMap文件，false将提高构建速度
	// 本地服务器，所有 webpack-dev-server 的选项都支持
	devServer:{
		open: false, // npm run serve后自动打开页面
		host: '0.0.0.0', // 匹配本机IP地址(默认是0.0.0.0)
		port: port, //端口号 上面配置了端口变量
		https: false, 
		hot: true, //热加载
		overlay: {
      		warnings: false, //警告不黑屏
      		errors: true //错误黑屏
    	},
		// 配置代理
		proxy: {
			'/api':{
				target: 'xxx', //要代理的域名
				changeOrigin: true, //允许跨域
				ws: true, //如果要代理 websockets，配置这个参数
      			secure: false,  // 如果是https接口，需要配置这个参数
      			pathRewrite: {
      				'^/api': ''  //以'/api'开头的接口地址，把/api替换
      			}
			}
		}
	}，
	//这个一种默认配置方案
	configureWebpack: {
    	name: name, //配置浏览器头部得标题
    	plugins: [
      		new webpack.ProvidePlugin({
        		$: 'jquery',
        		jQuery: 'jquery'    //ProvidePlugin，是webpack的内置模块
        		//用ProvidePlugin进行实例初始化后，jquery就会被自动加载并导入对应的node模块中
      		})
    	],
    	resolve: {
      		alias: {
        		'@': resolve('src') //起别名
      		}
    	}
  	},
  	
  	//另外一种chainWebpack 可以采用链式操作 去合并上面的配置
  	chainWebpack: config => {
        config.resolve.alias
        .set("@v", resolve("src/views"))
        .set("@c", resolve("src/components"))
        .set("@u", resolve("src/utils"))  /* 别名配置 */
			
		config.plugins.delete('preload')  //删除默认的预加载
    	config.plugins.delete('prefetch') 
    },
	//css-loader
	css: {
    	loaderOptions: {
      		css: {
        		// 这里的选项会传递给 css-loader
        		plugins:[] //自定义css插件
      		},
      		postcss: {
        		// 这里的选项会传递给 postcss-loader
        		plugins:[
        			require('postcss-pxtorem')({ // 把px单位换算成rem单位
              		rootValue: 37.5, // 换算的基数(设计图750的根字体为32)
              		propList: ['*']
            		}),  
            		require('autoprefixer') //css自动加前缀
        		]
      		}
    	}
  	}
}