/** * @description vue.config.js全局配置 */ const path = require("path"); const proxy = require("./proxy.config.json"); const { /* baseURL, */ publicPath, assetsDir, outputDir, transpileDependencies, title, abbreviation, devPort, providePlugin, build7z, buildGzip, imageCompression, } = require("./src/config"); const rely = require("vue-plugin-rely"); const { webpackBarName, webpackBanner } = require("./vab.config"); const { version, author } = require("./package.json"); const Webpack = require("webpack"); const WebpackBar = require("webpackbar"); const FileManagerPlugin = require("filemanager-webpack-plugin"); const dayjs = require("dayjs"); const dateTime = dayjs().format("YYYY-M-D HH:mm:ss"); const CompressionWebpackPlugin = require("compression-webpack-plugin"); const productionGzipExtensions = ["html", "js", "css", "svg"]; process.env.VUE_APP_TITLE = title; process.env.VUE_APP_AUTHOR = author; process.env.VUE_APP_RANDOM = `${dayjs()}-${process.env.VUE_GITHUB_USER_NAME}`; process.env.VUE_APP_UPDATE_TIME = dateTime; process.env.VUE_APP_VERSION = version; process.env.VUE_APP_RELY = rely; const resolve = (dir) => { return path.join(__dirname, dir); }; module.exports = { publicPath, assetsDir, outputDir, lintOnSave: false, transpileDependencies, devServer: { disableHostCheck: true, // allowedHosts: ['www.shbpms.com'], hot: true, port: devPort, open: false, proxy: proxy, noInfo: false, overlay: { warnings: false, errors: false, }, host: "0.0.0.0", // 注释掉的地方是前端配置代理访问后端的示例 // baseURL必须为/xxx,而不是后端服务器,请先了解代理逻辑,再设置前端代理 // !!!一定要注意!!! // 1.这里配置了跨域及代理只针对开发环境生效 // 2.不建议你在前端配置跨域,建议你后端配置Allow-Origin,Method,Headers,放行token字段,一步到位 // 3.后端配置了跨域,就不需要前端再配置,会发生Origin冲突 // proxy: { // [baseURL]: { // target: `http://你的后端接口地址`, // ws: true, // changeOrigin: true, // pathRewrite: { // ['^' + baseURL]: '', // }, // }, // }, after: require("./mock"), }, pwa: { workboxOptions: { skipWaiting: true, clientsClaim: true, }, iconPaths: { favicon32: "favicon.ico", favicon16: "favicon.ico", appleTouchIcon: "favicon.ico", maskIcon: "favicon.ico", msTileImage: "favicon.ico", }, themeColor: "#ffffff", msTileColor: "#ffffff", appleMobileWebAppCapable: "yes", appleMobileWebAppStatusBarStyle: "black", manifestOptions: { name: "生物样品库安全管理系统", short_name: "生物样品库安全管理系统", background_color: "#ffffff", }, }, configureWebpack() { return { resolve: { alias: { "~": resolve("."), "@": resolve("src"), "@/modules": resolve("src/modules"), }, }, plugins: [ new Webpack.ProvidePlugin(providePlugin), new WebpackBar({ name: webpackBarName, }), ], }; }, chainWebpack(config) { config.resolve.symlinks(true); config.module.rule("svg").exclude.add(resolve("src/icon")); config.module .rule("vabIcon") .test(/\.svg$/) .include.add(resolve("src/icon")) .end() .use("svg-sprite-loader") .loader("svg-sprite-loader") .options({ symbolId: "vab-icon-[name]" }); config.when(process.env.NODE_ENV === "development", (config) => { config.devtool("source-map"); }); config.when(process.env.NODE_ENV === "production", (config) => { config.performance.set("hints", false); config.devtool("none"); config.optimization.splitChunks({ automaticNameDelimiter: "-", chunks: "all", cacheGroups: { chunk: { name: "vab-chunk", test: /[\\/]node_modules[\\/]/, minSize: 131072, maxSize: 524288, chunks: "async", minChunks: 2, priority: 10, }, vue: { name: "vue", test: /[\\/]node_modules[\\/](vue(.*)|core-js)[\\/]/, chunks: "initial", priority: 20, }, elementUI: { name: "element-ui", test: /[\\/]node_modules[\\/]element-ui(.*)[\\/]/, priority: 30, }, extra: { name: "vab-extra", test: resolve("src/extra"), priority: 40, }, // 根据使用模块抽取公共代码 echarts: { name: "echarts", test: /[\\/]node_modules[\\/](echarts|zrender|tslib)[\\/]/, priority: 50, }, }, }); config .plugin("banner") .use(Webpack.BannerPlugin, [`${webpackBanner}${dateTime}`]); if (imageCompression) config.module .rule("images") .use("image-webpack-loader") .loader("image-webpack-loader") .options({ bypassOnDebug: true, }) .end(); if (buildGzip) config.plugin("compression").use(CompressionWebpackPlugin, [ { filename: "[path][base].gz[query]", algorithm: "gzip", test: new RegExp( "\\.(" + productionGzipExtensions.join("|") + ")$" ), threshold: 8192, minRatio: 0.8, }, ]); if (build7z) config.plugin("fileManager").use(FileManagerPlugin, [ { events: { onEnd: { archive: [ { source: `./${outputDir}`, destination: `./${outputDir}/${abbreviation}_${dayjs().unix()}.zip`, }, ], }, }, }, ]); }); }, runtimeCompiler: true, productionSourceMap: false, css: { requireModuleExtension: true, sourceMap: true, loaderOptions: { sass: { sassOptions: { outputStyle: "expanded" }, additionalData(content, loaderContext) { const { resourcePath, rootContext } = loaderContext; const relativePath = path.relative(rootContext, resourcePath); if ( relativePath.replace(/\\/g, "/") !== "src/vab/styles/variables/variables.scss" ) return ( '@import "~@/vab/styles/variables/variables.scss";' + content ); return content; }, }, }, }, };