'use strict'const path =require('path')const defaultSettings =require('./src/settings.js')console.log('当前环境：', process.env.NODE_ENV)functionresolve(dir){return path.join(__dirname, dir)}const name = defaultSettings.title ||'vue Admin Template'// page title// If your port is set to 80,// use administrator privileges to execute the command line.// For example, Mac: sudo npm run// You can change the port by the following methods:// port = 9528 npm run dev OR npm run dev --port = 9528const port = process.env.port || process.env.npm_config_port ||9528// dev port// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports ={/*** You will need to set publicPath if you plan to deploy your site under a sub path,* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,* then publicPath should be set to "/bar/".* In most cases please use '/' !!!* Detail: https://cli.vuejs.org/config/#publicpath*/publicPath:'/',outputDir:'dist',assetsDir:'static',lintOnSave: process.env.NODE_ENV==='development',productionSourceMap:false,devServer:{port: port,open:true,overlay:{warnings:false,errors:true},proxy:{'/api':{target:'https://heimahr.itheima.net/',logLevel:'debug'// 添加调试日志}}// before: require('./mock/mock-server.js')},/*** 配置webpack构建选项* @param {Object} config - webpack配置对象* @returns {void}*/configureWebpack:(config)=>{// provide the app's title in webpack's name field, so that// it can be accessed in index.html to inject the correct title.if(process.env.NODE_ENV==='development'){config.devtool ='eval-source-map'}config.name = nameconfig.resolve ={...config.resolve,alias:{...config.resolve?.alias,'@':resolve('src')}}// 配置需要排除的包config.externals ={'vue':'Vue','element-ui':'ELEMENT','cos-js-sdk-v5':'COS'}},/*** 配置 Webpack 构建过程，用于优化打包和加载性能* @param {Object} config - Webpack 配置对象，用于链式调用修改配置* 主要功能包括：* 1. 配置 preload 插件以提升首屏加载速度* 2. 移除 prefetch 插件避免过多无意义请求* 3. 配置 svg-sprite-loader 处理 SVG 图标* 4. 在生产环境启用运行时代码内联和代码分割优化*/chainWebpack(config){// 忽略的打包文件// config.externals({// 'vue': 'Vue',// 'vue-router': 'VueRouter',// 'vuex': 'Vuex',// 'axios': 'axios',// 'element-ui': 'ELEMENT'// })// 配置 preload 插件提升首屏加载速度// 推荐开启 preload，可以预加载关键资源// 忽略 runtime.js 文件的预加载，避免不必要的资源加载config.plugin('preload').tap(()=>[{rel:'preload',// to ignore runtime.js// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171// 忽略映射文件、热更新文件和运行时文件fileBlacklist:[/\.map$/,/hot-update\.js$/,/runtime\..*\.js$/],include:'initial'}])// 当页面较多时，prefetch 会产生大量无意义的预请求// 删除 prefetch 插件以避免性能问题config.plugins.delete('prefetch')// 配置 svg-sprite-loader 处理 SVG 图标// 排除 src/icons 目录下的 SVG 文件，使用专门的 icons 规则处理config.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId:'icon-[name]'// 设置 SVG symbol 的 ID 格式}).end()// 仅在生产环境启用以下优化配置config.when(process.env.NODE_ENV!=='development',(config)=>{config.plugin('ScriptExtHtmlWebpackPlugin').after('html').use('script-ext-html-webpack-plugin',[{// 内联匹配运行时代码的 JS 文件// 名称必须与 runtimeChunk 的名称一致，默认为 'runtime'inline:/runtime\..*\.js$/}]).end()// 配置代码分割策略，优化打包文件大小和缓存效果config.optimization.splitChunks({chunks:'all',// 对所有类型的代码块进行分割cacheGroups:{libs:{name:'chunk-libs',// 第三方库打包为独立文件test:/[\\/]node_modules[\\/]/,// 匹配 node_modules 中的模块priority:10,// 设置优先级chunks:'initial'// 仅打包初始依赖的第三方库},elementUI:{name:'chunk-elementUI',// 将 Element UI 组件库单独打包priority:20,// 设置较高优先级，确保独立打包test:/[\\/]node_modules[\\/]_?element-ui(.*)/// 适配 cnpm 安装路径},commons:{name:'chunk-commons',// 公共组件打包为独立文件test:resolve('src/components'),// 匹配 src/components 目录下的组件minChunks:3,// 最小公共引用次数priority:5,// 设置优先级reuseExistingChunk:true// 复用已存在的代码块}}})// 将运行时代码单独打包成一个文件// 有助于长期缓存，提升加载性能config.optimization.runtimeChunk('single')})}}
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/><linkrel="icon"href="<%= BASE_URL %>favicon.ico"/><title><%= webpackConfig.name %></title><linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><noscript><strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled.Please enable it to continue.</strong></noscript><divid="app"></div><!-- built files will be auto injected --><scriptsrc="https://unpkg.com/vue@2.7.10/dist/vue.js"></script><scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script></body></html>
