vue.config.js配置
生活随笔
收集整理的這篇文章主要介紹了
vue.config.js配置
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
原作者項目地址: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', 生產(chǎn)環(huán)境構建文件的目錄// assetsDir: "", // 相對于outputDir的靜態(tài)資源(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請求獲取所有必要數(shù)據(jù)后呈現(xiàn)的,因此我們在dom中存在“data view”屬性后創(chuàng)建頁面快照// 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, // 生產(chǎn)環(huán)境的 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, // 開啟代理,在本地創(chuàng)建一個虛擬服務端// ws: true, // 是否啟用websocketspathRewrite: {"^/api": "/"}}}} };我自己用正在用的配置:
//下面UglifyJsPlugin 等模塊要自己用 npm install 一下
總結
以上是生活随笔為你收集整理的vue.config.js配置的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 我爱吃水果作文400?
- 下一篇: 咸鸭蛋煮熟后如何保存?