Giters

staven630 / vue-cli4-config

vue-cli4配置vue.config.js持续更新

Home Page:https://staven630.github.io/vue-cli4-config/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

在build生成的dist目录下起本地服务，页面空白 控制台warning

3344567 opened this issue · comments

commented 
// vue.config.js
const webpack = require("webpack");
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
const IS_PROD = process.env.NODE_ENV !== "development";

const glob = require("glob");
const pagesInfo = require("./pages.config");
const pages = {};

glob.sync("./src/**/main.js").forEach(p => {
	let result = p.match(/\.\/src\/(.*)\/main\.js/);
	result = result ? result[1] : "";
	const key = result ? result : "main";
	if (pagesInfo[key]) {
		pages[key] = {
			entry: result ? `src/${result}/main.js` : "src/main.js"
		};
		for (const info in pagesInfo[key]) {
			pages[key] = {
				...pages[key],
				[info]: pagesInfo[key][info]
			};
		}
	}
});
module.exports = {
	publicPath: "./", // 默认'/'，部署应用包时的基本 URL
	// outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
	// assetsDir: "", // 相对于outputDir的静态资源(js、css、img、fonts)目录
	configureWebpack: config => {
		config.externals = {
			vue: "Vue",
			"element-ui": "ELEMENT",
			"vue-router": "VueRouter",
			vuex: "Vuex",
			axios: "axios"
		};
	},

	chainWebpack: config => {
		// 修复HMR
		config.resolve.symlinks(true);

		config.plugin("ignore").use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/));

		// 添加别名
		config.resolve.alias.set("@", resolve("src"));

		const cdn = {
			// 访问https://unpkg.com/element-ui/lib/theme-chalk/index.css获取最新版本
			css: ["//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css"],
			js: [
				"//unpkg.com/vue@2.6.10/dist/vue.min.js", // 访问https://unpkg.com/vue/dist/vue.min.js获取最新版本
				"//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js",
				"//unpkg.com/vuex@3.1.1/dist/vuex.min.js",
				"//unpkg.com/axios@0.19.0/dist/axios.min.js",
				"//unpkg.com/element-ui@2.10.1/lib/index.js"
			]
		};
		// 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
		// config.plugin("html").tap(args => {
		//   // html中添加cdn
		//   args[0].cdn = cdn;

		//   // 修复 Lazy loading routes Error
		//   args[0].chunksSortMode = "none";
		//   return args;
		// });

		// 防止多页面打包卡顿
		config => config.plugins.delete("named-chunks");

		// 多页面cdn添加
		Object.keys(pagesInfo).forEach(page => {
			config.plugin(`html-${page}`).tap(args => {
				// html中添加cdn
				args[0].cdn = cdn;

				// 修复 Lazy loading routes Error
				args[0].chunksSortMode = "none";
				return args;
			});
		});

		return config;
	},
	pages,
	css: {
		extract: IS_PROD,
		sourceMap: false,
		loaderOptions: {
			scss: {
				// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
				// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
				// prependData: `
				// 	@import "@/scss/variables.scss";
				// 	@import "@/scss/mixins.scss";
				// 	@import "@/scss/function.scss";
				// 	$src: "${process.env.VUE_APP_OSS_SRC}";
				// `
			}
		}
	},
	lintOnSave: false,
	runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
	productionSourceMap: !IS_PROD, // 生产环境的 source map
	parallel: require("os").cpus().length > 1
};
// pages.config.js
module.exports = {
	main: {
		template: "public/index.html",
		filename: "index.html",
		title: "主页",
		chunks: ["chunk-vendors", "chunk-common", "index"]
	}
	// "pages/admin": {
	// 	template: "public/index.html",
	// 	filename: "admin.html",
	// 	title: "后台管理",
	// 	chunks: ["chunk-vendors", "chunk-common", "index"]
	// },
	// "pages/mobile": {
	// 	template: "public/index.html",
	// 	filename: "mobile.html",
	// 	title: "移动端",
	// 	chunks: ["chunk-vendors", "chunk-common", "index"]
	// }
};

在build生成的dist目录下起本地服务，页面空白
控制台warning
image

commented

The resource http://127.0.0.1:8080/js/main.6ec50182.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
当我尝试将pages，也就是多页面注释后，页面正常

commented

似乎是这里的问题
chunks: ["chunk-vendors", "chunk-common", "index"]
当我尝试注释掉这一行，页面正常
我无法再进一步解释

commented

重新测试了下，并改了下东西，默认只将pages目录main.js视为多站点入口

commented

现在打包是没问题的，
开发环境下：
访问http://172.23.4.62:8080/pages/admin
页面显示为
image

// pages.config.js
module.exports = {
	admin: {
		template: "public/index.html",
		filename: "admin.html",
		title: "后台管理"
	}
};

image
src目录下新建pages目录，pages目录下新建admin目录，admin目录下新建main.js

// src/pages/admin/main.js
import Vue from "vue";
import App from "@/App.vue";
// import "core-js";
// import "regenerator-runtime/runtime";
Vue.config.productionTip = false;

new Vue({
	render: h => h(App)
}).$mount("#app");
// vue.config.js
const webpack = require("webpack");
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
const IS_PROD = process.env.NODE_ENV !== "development";

const glob = require("glob");
const pagesInfo = require("./pages.config");
const pages = {};

glob.sync("./src/pages/**/main.js").forEach(entry => {
	let chunk = entry.match(/\.\/src\/pages\/(.*)\/main\.js/)[1];
	const curr = pagesInfo[chunk];
	if (curr) {
		pages[chunk] = {
			entry,
			...curr,
			chunk: ["chunk-vendors", "chunk-common", chunk]
		};
	}
});
module.exports = {
	publicPath: "./", // 默认'/'，部署应用包时的基本 URL
	// outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
	// assetsDir: "", // 相对于outputDir的静态资源(js、css、img、fonts)目录
	configureWebpack: config => {
		config.externals = {
			vue: "Vue",
			"element-ui": "ELEMENT",
			"vue-router": "VueRouter",
			vuex: "Vuex",
			axios: "axios"
		};
	},
	// 禁止hash
	filenameHashing: false,
	chainWebpack: config => {
		// 修复HMR
		config.resolve.symlinks(true);

		config.plugin("ignore").use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/));

		// 添加别名
		config.resolve.alias.set("@", resolve("src"));

		const cdn = {
			// 访问https://unpkg.com/element-ui/lib/theme-chalk/index.css获取最新版本
			css: ["//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css"],
			js: [
				"//unpkg.com/vue@2.6.10/dist/vue.min.js", // 访问https://unpkg.com/vue/dist/vue.min.js获取最新版本
				"//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js",
				"//unpkg.com/vuex@3.1.1/dist/vuex.min.js",
				"//unpkg.com/axios@0.19.0/dist/axios.min.js",
				"//unpkg.com/element-ui@2.10.1/lib/index.js"
			]
		};

		// 防止多页面打包卡顿
		config => config.plugins.delete("named-chunks");

		// 多页面cdn添加
		Object.keys(pagesInfo).forEach(page => {
			config.plugin(`html-${page}`).tap(args => {
				// html中添加cdn
				args[0].cdn = cdn;

				// 修复 Lazy loading routes Error
				args[0].chunksSortMode = "none";
				return args;
			});
		});
		return config;
	},
	pages,
	css: {
		extract: IS_PROD,
		sourceMap: false,
		loaderOptions: {
			scss: {
				// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
				// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
				// prependData: `
				// 	@import "@/scss/variables.scss";
				// 	@import "@/scss/mixins.scss";
				// 	@import "@/scss/function.scss";
				// 	$src: "${process.env.VUE_APP_OSS_SRC}";
				// `
			}
		}
	},
	lintOnSave: false,
	runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
	productionSourceMap: !IS_PROD, // 生产环境的 source map
	parallel: require("os").cpus().length > 1
};
commented

现在打包是没问题的，
开发环境下：
访问http://172.23.4.62:8080/pages/admin
页面显示为
image

// pages.config.js
module.exports = {
	admin: {
		template: "public/index.html",
		filename: "admin.html",
		title: "后台管理"
	}
};

image
src目录下新建pages目录，pages目录下新建admin目录，admin目录下新建main.js

// src/pages/admin/main.js
import Vue from "vue";
import App from "@/App.vue";
// import "core-js";
// import "regenerator-runtime/runtime";
Vue.config.productionTip = false;

new Vue({
	render: h => h(App)
}).$mount("#app");
// vue.config.js
const webpack = require("webpack");
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
const IS_PROD = process.env.NODE_ENV !== "development";

const glob = require("glob");
const pagesInfo = require("./pages.config");
const pages = {};

glob.sync("./src/pages/**/main.js").forEach(entry => {
	let chunk = entry.match(/\.\/src\/pages\/(.*)\/main\.js/)[1];
	const curr = pagesInfo[chunk];
	if (curr) {
		pages[chunk] = {
			entry,
			...curr,
			chunk: ["chunk-vendors", "chunk-common", chunk]
		};
	}
});
module.exports = {
	publicPath: "./", // 默认'/'，部署应用包时的基本 URL
	// outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
	// assetsDir: "", // 相对于outputDir的静态资源(js、css、img、fonts)目录
	configureWebpack: config => {
		config.externals = {
			vue: "Vue",
			"element-ui": "ELEMENT",
			"vue-router": "VueRouter",
			vuex: "Vuex",
			axios: "axios"
		};
	},
	// 禁止hash
	filenameHashing: false,
	chainWebpack: config => {
		// 修复HMR
		config.resolve.symlinks(true);

		config.plugin("ignore").use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/));

		// 添加别名
		config.resolve.alias.set("@", resolve("src"));

		const cdn = {
			// 访问https://unpkg.com/element-ui/lib/theme-chalk/index.css获取最新版本
			css: ["//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css"],
			js: [
				"//unpkg.com/vue@2.6.10/dist/vue.min.js", // 访问https://unpkg.com/vue/dist/vue.min.js获取最新版本
				"//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js",
				"//unpkg.com/vuex@3.1.1/dist/vuex.min.js",
				"//unpkg.com/axios@0.19.0/dist/axios.min.js",
				"//unpkg.com/element-ui@2.10.1/lib/index.js"
			]
		};

		// 防止多页面打包卡顿
		config => config.plugins.delete("named-chunks");

		// 多页面cdn添加
		Object.keys(pagesInfo).forEach(page => {
			config.plugin(`html-${page}`).tap(args => {
				// html中添加cdn
				args[0].cdn = cdn;

				// 修复 Lazy loading routes Error
				args[0].chunksSortMode = "none";
				return args;
			});
		});
		return config;
	},
	pages,
	css: {
		extract: IS_PROD,
		sourceMap: false,
		loaderOptions: {
			scss: {
				// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
				// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
				// prependData: `
				// 	@import "@/scss/variables.scss";
				// 	@import "@/scss/mixins.scss";
				// 	@import "@/scss/function.scss";
				// 	$src: "${process.env.VUE_APP_OSS_SRC}";
				// `
			}
		}
	},
	lintOnSave: false,
	runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
	productionSourceMap: !IS_PROD, // 生产环境的 source map
	parallel: require("os").cpus().length > 1
};

"serve": "vue-cli-service serve" 这样运行能正常显示和调试吗？

commented

已经调通了