vue中关于webpack的配置

vue中关于webpack的配置 — vue.config.js

• 调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

// vue.config.js
module.exports = {
// 部署应用包时的基本 URL 默认 '/' 如果想把开发服务器架设在根路径 可设置一个有条件的值
  pubilcPath: process.env.NODE_ENV === 'production'
    ? '/'
    : '/',
   // 打包项目时生成生产环境的路径
   outputDir: 'dist/' //根据情况而定,
   assetsDir: '', //防止静态资源相对于outputDir的目录,
   indexPath: '指定生成的index.html的输出路径',
   filenameHashing: true, //生成的静态资源在他们的文件名中包含了hash 以便更好地控制缓存 要求index.html是被Vue Cli 自动生成的 如果不是 设置为flase
   pages: {
   		index: {
			entry: 'src/main.js', //对于多页面来说 每个page应该有一个对象的js入口文件
			template: 'pulbilc/index.html', //模板来源
			filename: 'index.html', // 打包之后的index.html的位置所在  
			title: '页面的title名字', //<title><%= htmlWebpackPlugin.options.title %></title>
			
		}
   },
   // 是否在开发是每次保存的时候lint代码
   // type: boolean : true会将lint错误输出位编译警告 仅会被输出到命令行 不会使编译失败
   //        warning  与为true相同
   //        default: lint错误会显示在浏览器中， 导致编译失败
   //         error 将lint警告编译为错误 导致编译失败
   lintOnSave: 'default', //也可通过环境判断当前环境是否需要编译
   devServer: {
    	overlay: { //让浏览器同时显示警告和错误
    		warnings: true,
    		error: true 
    	},
    	proxy: {
	      '/api': {
	        target: '<url>',
	        ws: true,
	        changeOrigin: true,
	        over
	      },
	      '/foo': {
	        target: '<other_url>'
	      }
    },
   configureWebpack: config => {//调整webpack的配置
		if (process.env.NODE_ENV === 'production') {
	      // 为生产环境修改配置...
	    } else {
	      // 为开发环境修改配置...
	    }
   },
   chainWebpack: config => {
   	config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
   },
    resolve:{
      alias:{ //配置别名
        "@":path.resolve(__dirname,'./src'),
        "@api":path.resolve(__dirname,"./src/api")
      }
    }
}