原作者項目地址：https://github.com/staven630/vue-cli3-config

const path = require("path"); const webpack = require("webpack"); // const glob = require("glob-all"); // const PurgecssPlugin = require("purgecss-webpack-plugin"); const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // const CompressionWebpackPlugin = require("compression-webpack-plugin"); // const PrerenderSpaPlugin = require("prerender-spa-plugin"); // const AliOssPlugin = require("webpack-oss"); const resolve = dir => path.join(__dirname, dir); const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV); // const SpritesmithPlugin = require('webpack-spritesmith') // let has_sprite = true// const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;// const addStylusResource = rule => { // rule // .use("style-resouce") // .loader("style-resources-loader") // .options({ // patterns: [resolve("src/assets/stylus/variable.styl")] // }); // };// try { // let result = fs.readFileSync(path.resolve(__dirname, './icons.json'), 'utf8') // result = JSON.parse(result) // const files = fs.readdirSync(path.resolve(__dirname, './src/assets/icons')) // has_sprite = files && files.length ? files.some(item => { // let filename = item.toLocaleLowerCase().replace(/_/g, '-') // return !result[filename] // }) : false // } finally { // has_sprite = false // }// 雪碧圖樣式處理模板 // const SpritesmithTemplate = function(data) { // // pc // let icons = {} // let tpl = `.ico { // display: inline-block; // background-image: url(${data.sprites[0].image}); // background-size: ${data.spritesheet.width}px ${data.spritesheet.height}px; // }`// data.sprites.forEach(sprite => { // const name = '' + sprite.name.toLocaleLowerCase().replace(/_/g, '-') // icons[`${name}.png`] = true // tpl = `${tpl} // .ico-${name}{ // width: ${sprite.width}px; // height: ${sprite.height}px; // background-position: ${sprite.offset_x}px ${sprite.offset_y}px; // } // ` // })// fs.writeFile( // path.resolve(__dirname, './icons.json'), // JSON.stringify(icons, null, 2), // (err, data) => {} // )// return tpl // } // const format = AliOssPlugin.getFormat();module.exports = {publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : "./", // 默認'/'，部署應用包時的基本 URL// outputDir: process.env.outputDir || 'dist', // 'dist', 生產環境構建文件的目錄// assetsDir: "", // 相對于outputDir的靜態資源(js、css、img、fonts)目錄configureWebpack: config => {const plugins = [];if (IS_PROD) {// 去除多余css// plugins.push(// new PurgecssPlugin({// paths: glob.sync([resolve("./**/*.vue")]),// extractors: [// {// extractor: class Extractor {// static extract(content) {// const validSection = content.replace(// /<style([\s\S]*?)<\/style>+/gim,// ""// );// return validSection.match(/[A-Za-z0-9-_:/]+/g) || [];// }// },// extensions: ["html", "vue"]// }// ],// whitelist: ["html", "body"],// whitelistPatterns: [/el-.*/],// whitelistPatternsChildren: [/^token/, /^pre/, /^code/]// })// );// plugins.push(// new UglifyJsPlugin({// uglifyOptions: {// compress: {// warnings: false,// drop_console: true,// drop_debugger: false,// pure_funcs: ["console.log"] //移除console// }// },// sourceMap: false,// parallel: true// })// );// 利用splitChunks單獨打包第三方模塊// config.optimization = {// splitChunks: {// cacheGroups: {// libs: {// name: "chunk-libs",// test: /[\\/]node_modules[\\/]/,// priority: 10,// chunks: "initial"// },// elementUI: {// name: "chunk-elementUI",// priority: 20,// test: /[\\/]node_modules[\\/]element-ui[\\/]/,// chunks: "all"// }// }// }// };// gzip// plugins.push(// new CompressionWebpackPlugin({// filename: "[path].gz[query]",// algorithm: "gzip",// test: productionGzipExtensions,// threshold: 10240,// minRatio: 0.8// })// );// 預加載// plugins.push(// new PrerenderSpaPlugin({// staticDir: resolve("dist"),// routes: ["/"],// postProcess(ctx) {// ctx.route = ctx.originalRoute;// ctx.html = ctx.html.split(/>[\s]+</gim).join("><");// if (ctx.route.endsWith(".html")) {// ctx.outputPath = path.join(__dirname, "dist", ctx.route);// }// return ctx;// },// minify: {// collapseBooleanAttributes: true,// collapseWhitespace: true,// decodeEntities: true,// keepClosingSlash: true,// sortAttributes: true// },// renderer: new PrerenderSpaPlugin.PuppeteerRenderer({// // 需要注入一個值，這樣就可以檢測頁面當前是否是預渲染的// inject: {},// headless: false,// // 視圖組件是在API請求獲取所有必要數據后呈現的，因此我們在dom中存在“data view”屬性后創建頁面快照// renderAfterDocumentEvent: "render-event"// })// })// );// oss// plugins.push(// new AliOssPlugin({// accessKeyId: process.env.ACCESS_KEY_ID,// accessKeySecret: process.env.ACCESS_KEY_SECRET,// region: process.env.REGION,// bucket: process.env.BUCKET,// prefix: process.env.PREFIX,// exclude: /.*\.html$/,// format// })// );}// config.externals = {// vue: "Vue",// "element-ui": "ELEMENT",// "vue-router": "VueRouter",// vuex: "Vuex",// axios: "axios"// };// if (has_sprite) {// plugins.push(// new SpritesmithPlugin({// src: {// cwd: path.resolve(__dirname, './src/assets/icons/'), // 圖標根路徑// glob: '**/*.png' // 匹配任意 png 圖標// },// target: {// image: path.resolve(__dirname, './src/assets/images/sprites.png'), // 生成雪碧圖目標路徑與名稱// // 設置生成CSS背景及其定位的文件或方式// css: [// [// path.resolve(__dirname, './src/assets/scss/sprites.scss'),// {// format: 'function_based_template'// }// ]// ]// },// customTemplates: {// function_based_template: SpritesmithTemplate// },// apiOptions: {// cssImageRef: '../images/sprites.png' // css文件中引用雪碧圖的相對位置路徑配置// },// spritesmithOptions: {// padding: 2// }// })// )// }config.plugins = [...config.plugins, ...plugins];},chainWebpack: config => {// 修復HMRconfig.resolve.symlinks(true);config.plugin("ignore").use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/));// 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.plugin("html").tap(args => {// 修復 Lazy loading routes Errorargs[0].chunksSortMode = "none";// html中添加cdn// args[0].cdn = cdn;return args;});// 添加別名config.resolve.alias.set("vue$", "vue/dist/vue.esm.js").set("@", resolve("src")).set("@assets", resolve("src/assets")).set("@scss", resolve("src/assets/scss")).set("@components", resolve("src/components")).set("@plugins", resolve("src/plugins")).set("@views", resolve("src/views")).set("@router", resolve("src/router")).set("@store", resolve("src/store")).set("@layouts", resolve("src/layouts")).set("@static", resolve("src/static"));// 壓縮圖片// config.module// .rule("images")// .use("image-webpack-loader")// .loader("image-webpack-loader")// .options({// mozjpeg: { progressive: true, quality: 65 },// optipng: { enabled: false },// pngquant: { quality: [0.65, 0.90], speed: 4 },// gifsicle: { interlaced: false },// webp: { quality: 75 }// });// const types = ["vue-modules", "vue", "normal-modules", "normal"];// types.forEach(type =>// addStylusResource(config.module.rule("stylus").oneOf(type))// );// 打包分析if (process.env.IS_ANALYZ) {config.plugin("webpack-report").use(BundleAnalyzerPlugin, [{analyzerMode: "static"}]);}if (IS_PROD) {// config.optimization.delete("splitChunks");}return config;},css: {modules: false,extract: IS_PROD,sourceMap: false,loaderOptions: {scss: {// 向全局sass樣式傳入共享的全局變量, $src可以配置圖片cdn前綴prependData: `@import "@scss/config.scss";@import "@scss/variables.scss";@import "@scss/mixins.scss";@import "@scss/utils.scss";$src: "${process.env.VUE_APP_OSS_SRC}";`}}},transpileDependencies: [],lintOnSave: false,runtimeCompiler: true, // 是否使用包含運行時編譯器的 Vue 構建版本productionSourceMap: !IS_PROD, // 生產環境的 source mapparallel: require("os").cpus().length > 1,pwa: {},devServer: {// overlay: { // 讓瀏覽器 overlay 同時顯示警告和錯誤// warnings: true,// errors: true// },// open: false, // 是否打開瀏覽器// host: "localhost",// port: "8080", // 代理斷就// https: false,// hotOnly: false, // 熱更新proxy: {"/api": {target:"https://www.easy-mock.com/mock/5bc75b55dc36971c160cad1b/sheets", // 目標代理接口地址secure: false,changeOrigin: true, // 開啟代理，在本地創建一個虛擬服務端// ws: true, // 是否啟用websocketspathRewrite: {"^/api": "/"}}}} };

我自己用正在用的配置：
//下面UglifyJsPlugin 等模塊要自己用 npm install 一下

const path = require("path"); const CompressionWebpackPlugin = require("compression-webpack-plugin"); const productionGzipExtensions = ["js", "css"]; const debug = process.env.NODE_ENV !== "production"; const UglifyJsPlugin = require("uglifyjs-webpack-plugin");const resolve = dir => path.join(__dirname, dir);const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);const addStylusResource = rule => {rule.use("style-resouce").loader("style-resources-loader").options({patterns: [resolve("src/assets/stylus/variable.styl")]}); };module.exports = {publicPath: "./", // 根域上下文目錄outputDir: "dist", // 構建輸出目錄assetsDir: "assets", // 靜態資源目錄 (js, css, img, fonts)lintOnSave: false, // 是否開啟eslint保存檢測，有效值：ture | false | 'error'runtimeCompiler: true, // 運行時版本是否需要編譯transpileDependencies: [], // 默認babel-loader忽略mode_modules，這里可增加例外的依賴包名// productionSourceMap: false, // 是否在構建生產包時生成 sourceMap 文件，false將提高構建速度productionSourceMap: !IS_PROD, // 生產環境的 source mapconfigureWebpack: config => {// webpack配置，值位對象時會合并配置，為方法時會改寫配置if (debug) {// 開發環境配置config.devtool = "cheap-module-eval-source-map";} else {config.plugins.push(new CompressionWebpackPlugin({algorithm: "gzip",test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),threshold: 10240,minRatio: 0.8}));config.plugins.push(new UglifyJsPlugin({uglifyOptions: {compress: {// warnings: true,drop_console: true,drop_debugger: false,pure_funcs: ["console.log"] //移除console}},sourceMap: false,parallel: true}));// 生產環境配置}// Object.assign(config, { // 開發生產共同配置// resolve: {// alias: {// '@': path.resolve(__dirname, './src'),// '@c': path.resolve(__dirname, './src/components'),// 'vue$': 'vue/dist/vue.esm.js'// }// }// })},chainWebpack: config => {// webpack鏈接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.mdif (debug) {// 本地開發配置} else {// 生產開發配置const types = ["vue-modules", "vue", "normal-modules", "normal"];types.forEach(type =>addStylusResource(config.module.rule("stylus").oneOf(type)));}},parallel: require("os").cpus().length > 1, // 構建時開啟多進程處理babel編譯pluginOptions: {// 第三方插件配置},pwa: {// 單頁插件相關配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa},devServer: {open: true,host: "0.0.0.0",port: 80,https: false,hotOnly: false,//跨域我這邊是在后臺處理的//proxy: {// // 配置跨域//"/api": {//target: "http://xxxxx/",//ws: true,//changOrigin: true,//pathRewrite: {// "xxx": ""//}//}//},before: app => {}} };

總結

以上是生活随笔為你收集整理的vue.config.js配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。