vue.config.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. const { defineConfig } = require("@vue/cli-service");
  2. const Components = require("unplugin-vue-components/webpack");
  3. const { ElementPlusResolver } = require("@kasite/element-plus/element-plus-resolver.js");
  4. const CopyWebpackPlugin = require("copy-webpack-plugin");
  5. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. const _config = require("./config/index.js");
  7. const { name } = require("./package.json");
  8. const path = require("path");
  9. /** 获取参数值 */
  10. const getBranchName = (argName) => {
  11. const argIndex = process.argv.findIndex((arg) => arg.indexOf(`--${argName}`) > -1);
  12. if (argIndex > -1) {
  13. const [name, value] = process.argv[argIndex].split("=");
  14. return value;
  15. }
  16. return;
  17. };
  18. const branchName = getBranchName("branch"); // 分支名称
  19. process.env.VUE_APP_BRANCH_NAME = branchName || "master";
  20. /** 获取入口 */
  21. const getEntry = () => {
  22. const mainPath = `${branchName ? `${branchName}/` : ""}` + "main.ts";
  23. const entry = `src/${branchName ? "branch/" : "master/"}${mainPath}`;
  24. const entries = {
  25. index: {
  26. // page的入口
  27. entry,
  28. // 模板来源
  29. template: "public/index.html",
  30. // 在 dist/index.html 的输出
  31. filename: "index.html",
  32. title: _config.system,
  33. chunks: ["chunk-vendors", "chunk-common", "index"],
  34. },
  35. };
  36. return entries;
  37. };
  38. const pages = getEntry();
  39. module.exports = defineConfig({
  40. //基本路径
  41. publicPath: process.env.NODE_ENV === "production" ? "./" : "/demo",
  42. pages: pages,
  43. //构建时的输出目录
  44. outputDir: "dist",
  45. //放置静态资源的目录
  46. assetsDir: "static",
  47. //html 的输出路径
  48. indexPath: "index.html",
  49. //文件名哈希
  50. filenameHashing: true,
  51. //是否在保存的时候使用 `eslint-loader` 进行检查。
  52. lintOnSave: false,
  53. //是否使用带有浏览器内编译器的完整构建版本
  54. runtimeCompiler: true,
  55. //babel-loader 默认会跳过 node_modules 依赖。
  56. transpileDependencies: [
  57. /* string or regex */
  58. ],
  59. //是否为生产环境构建生成 source map?
  60. productionSourceMap: false,
  61. //设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
  62. crossorigin: "",
  63. //在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
  64. integrity: false,
  65. configureWebpack: {
  66. // 自动导入element-plus
  67. plugins: [
  68. Components({
  69. dirs: ["src/components"],
  70. deep: true,
  71. resolvers: [
  72. ElementPlusResolver({
  73. prefix: "Zy",
  74. }),
  75. ],
  76. }),
  77. new CopyWebpackPlugin({
  78. patterns: [
  79. {
  80. from: "./config/index.js",
  81. to: "./config",
  82. },
  83. ],
  84. }),
  85. ],
  86. output: {
  87. // library: `${name}-[name]`,
  88. // libraryTarget: "umd",
  89. chunkLoadingGlobal: `webpackJsonp_${name}`,
  90. globalObject: "window",
  91. },
  92. },
  93. chainWebpack: (config) => {
  94. config.resolve.alias.set("@", path.resolve(__dirname, "src/master"));
  95. config.module
  96. .rule("vue")
  97. .use("vue-loader")
  98. .tap((options) => {
  99. options.compilerOptions = {
  100. ...(options.compilerOptions || {}),
  101. isCustomElement: (tag) => /^micro-app/.test(tag),
  102. };
  103. return options;
  104. });
  105. },
  106. // CSS 相关选项
  107. css: {
  108. // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
  109. // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
  110. extract: true,
  111. // 是否开启 CSS source map?
  112. sourceMap: false,
  113. // 为预处理器的 loader 传递自定义选项。比如传递给
  114. // Css-loader 时,使用 `{ Css: { ... } }`。
  115. loaderOptions: {
  116. sass: {
  117. //新版scss-loader(10.0及以上) prependData (data)
  118. additionalData: (content, loaderContext) => {
  119. const { resourcePath } = loaderContext;
  120. const path = "variable.scss";
  121. if (resourcePath && resourcePath.indexOf(path) > 0) return content;
  122. return `@use "@/assets/scss/${path}" as *; ${content}`;
  123. },
  124. },
  125. },
  126. },
  127. devServer: {
  128. // headers: {
  129. // "Access-control-Allow-Origin": process.env.NODE_ENV === "production" ? "" : "*",
  130. // },
  131. proxy: {
  132. "/api": {
  133. target: _config.baseURL, //api服务器地址
  134. changeOrigin: true, //是否允许跨域
  135. secure: false,
  136. pathRewrite: {
  137. "^/api": "",
  138. },
  139. },
  140. },
  141. },
  142. });