vue.config.js相关 -- 持续更新

vue.config.js

---

笔记记录，更新日志在底部。

/* 

 author: kk
 
 create: 2020.10.28
 
 ** 仅供参考，如有issue提交请移步github. 复制黏贴请注明出处. 请勿作商用，谢谢；
 
 ** 按需使用，不需使用请自行注释；
 
 ** 持续更新vue.config.js中，尽量都有注释。
 
 */

//通用极简版
module.exports = {
    publicPath: './',
	lintOnSave: false,
	devServer: {
		port: 1024, //端口
		host: 'localhost', //访问IP
		open: true//配置浏览器自动访问
	}
}

// 处理关于文件路径的问题 如：获取文件名，包含扩展名 console.log(path.basename('./a/b/c/1.txt')); require()用于在当前模块中加载和使用其他模块
const path = require('path')
// 提供带 Content-Encoding 编码的压缩版的资源 , 内容编码格式gzip 和 deflate
const CompressioWebpackPlugin = require('compression-webpack-plugin')
// 前后端分离 vue+node(express) 创建express应用程序
const express = require('express')
// express() ---> http.createServer()  , 创建一个web服务器 并且返回app实例
const app = express()

// var singer = require('./src/assets/js/data.json')  //本地json文件数据

// seo优化之预渲染prerender-spa-plugin
 const PrerenderSPAPlugin = require('prerender-spa-plugin');
 const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
 // 创建Router
var apiRoutes = express.Router();
// 把Router添加到服务
app.use('/api',apiRoutes);

function resolve(dir){
	// __dirname 变量 是以文件所处的路径为值
	return path.join(__dirname, dir)
}

module.exports = {
	// webpack 提供一个非常有用的配置，该配置能帮助你为项目中的所有资源指定一个【基础路径】，它被称为公共路径(publicPath)。 默认"./"
	publicPath: process.env.NODE_ENV === 'production' ? '/tinytiger_wap/':'/',
	// 静态资源目录 (js, css, img, fonts) ; static放别人家的资源，assets放自己家的资源。
	assetsDir: "static",
	//是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
	productionSourceMap: false,
	// 是否开启eslint保存检测，有效值：ture | false | 'error'
	lintOnSave: false,
	// 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
	transpileDependencies: ['vue-clamp', 'resize-detector'],
	//baseUrl, 根域上下文目录
	baseUrl: './', 
	// 构建时的输出目录
	outputDir: 'dist', 
	// 运行时版本是否需要编译
	runtimeCompiler: true,
	// 构建时开启多进程处理babel编译
	parallel: require('os').cpus().length > 1, 
	pluginOptions: { 
		// 第三方插件配置
	},
	pwa: { 
		// 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
	},
	// 修改Webpack相关配置
	chainWebpack: (config)=>{
		// js,css 文件的最小压缩
		config.optimization.minimize(true);
		// 分割代码
		config.optimization.splitChunks({
			chunks: 'initial',  //  async 异步代码分割模式：只分割出异步引入的模块
		})
		// 移除 preload 插件 //预加载
		config.plugins.delete('preload')
		//直接修改配置
		config.resolve.alias
		// key,value自行定义，比如.set('@assets', resolve('src/assets')), .set(key,value)
			.set("@", resolve("src"))
			.set("@img",resolve("src/assets/img"))
			.set("@styl",resolve("src/assets/styl"))
			.set("@js",resolve("src/assets/js"))
			.set("@lib",resolve("src/assets/js/lib"))
			.set("@cp",resolve("src/components"))
			.set("@views",resolve("src/views"))
			.end()
		// 模块配置
		config.module
			// 小于10k的图片在img下不会有图片文件，而是直接把图片的base64值写到html引入图片的地方
			// 大于10k的图片会放在img下，需要的时候通过http请求下载
			.rule("images")
				.test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
				.use("url-loader")
					.loader("url-loader")
					.options({
						limit: 10000,
						fallback: {
							loader: "file-loader",
							options: {
								name: "static/img/[name].[hash:8].[ext]"
							}
						}
					})
				.end()
	},
	css: { // 配置高于chainWebpack中关于css loader的配置
	    // modules: true, // 是否开启支持‘foo.module.css’样式
	    // extract: true, // 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用<style>方式内联至html文件中
	    sourceMap: false, // 是否在构建样式地图，false将提高构建速度
	    loaderOptions: { // css预设器配置项
			css: {
				// options here will be passed to css-loader
			},
			postcss: {
				// options here will be passed to postcss-loader
				// plugins: [require('postcss-px2rem')({
				//     remUnit: 75
				// })]
			},
	        sass: {
	            data: ''// @import "@/assets/scss/index.scss";
	        }
	    }
	},
	configureWebpack:config=>{
	    //关闭 webpack 的性能提示
	    // performance: {
		   //  hints:false
	    // }
	    //或者
		// config.optimization.minimize(true)
		// process 是 node 的全局变量，我们可以通过判断这个变量区分开发环境或生产环境，development/production/none
		if(process.env.NODE_ENV==='production'){
			return{
				plugins: [
					new CompressionWebpackPlugin({
						test: /\.js$|\.html$|\.css/,
						// 只处理比这个值大的资源。按字节计算
						threshold: 10240,
						// 是否删除原资源
						deleteOriginalAssets: false
				
					}),
			plugins:[
				new PrerenderSPAPlugin({
					// 生成文件的路径，也可以与webpakc打包的一致。
					// 下面这句话非常重要！！！
					// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
					staticDir: path.join(__dirname, 'dist'),
					// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
					routes: ['/', '/searchs', '/RankingList','/policy','/moreClass','/gameDetail','/find','/contact','/classDetail','/Amwaywalldetail','/Amwaywall','/about'],
					// 这个很重要，如果没有配置这段，也不会进行预编译
					renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
						inject: {
							foo: 'bar'
						},
						// headless: true,
						// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
						renderAfterDocumentEvent: 'render-event',
						// renderAfterElementExists:'app',
						renderAfterTime: 5000,
						// executablePath: './node_modules/puppeteer/.local-chromium/chrome-win/chrome.exe'
						})
					}),
				]
			}
		}
		// 警告 webpack 的性能提示
		performance: {
			hints:'warning',
			// 入口起点的最大体积
			maxEntrypointSize: 50000000,
			// 生成文件的最大体积
			maxAssetSize: 30000000,
			// 只给出 js 文件的性能提示
			assetFilter: function(assetFilename) {
				return assetFilename.endsWith('.js');
			}
		}
	}
	devServer: {
		disableHostCheck: true,
		port: 80,
		proxy: {
			"/v1": {
				target: "https://h5api.chatbot.nie.163.com",
				ws: true,
				changOrigin: true,
				pathRewrite: {
					'^/v1': ''
				}
			}
		},
		// 返回当前平台类型 （'darwin', 'freebsd', 'linux', 'sunos' 或者 'win32'），参考 NodeJS-process对象
		open: process.platform === 'darwin'
		//配置自动启动浏览器
		open: true
		// 模拟后台服务器 express写法
		before(app) {
			// 直接模拟数据
			app.get('/api/singer', (req, res) => {
				res.json({              
					errno: 0,   // 这里是你的json内容
					data: singer
				})
			})
			// 模拟登录
			app.get('/api/login', function(req, res) {
				const { username, passwd } = req.query;
				console.log(username, passwd);
				if (username === 'admin' && passwd === '123456') {
					res.json({ code: 1, token: 'kk' });
				} else {
					res
					.status(401)
					.json({ code: 0, message: '用户名或密码错误' });
				}
			}
		},
		open: process.platform === 'darwin',
		host: '0.0.0.0',
		port: 8080,
		https: false,
		hotOnly: false,
		proxy: null
		//设置跨域，即将本文件内任何没有匹配到的静态文件，都指向跨域地址
	  }
	}
}

更新日志：

---

2020.10.28 更新

[新增]vue.config.js 初始化 以及 相关注释内容

2020.10.30 更新

[新增]极简通用型配置，适用小类型需求