vue.config.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. const { defineConfig } = require("@vue/cli-service");
  2. const linariaLessLoader = require("@queenjs/webpack-loader/linaria-loader");
  3. const modifyVars = require("./src/styles/theme-antd");
  4. const path = require("path");
  5. const {
  6. CKEditorTranslationsPlugin,
  7. } = require("@ckeditor/ckeditor5-dev-translations");
  8. const { styles } = require("@ckeditor/ckeditor5-dev-utils");
  9. const publicPath =
  10. process.env.NODE_ENV === "production"
  11. ? `//infishwaibao.oss-cn-chengdu.aliyuncs.com/queenshowv1/`
  12. : "./";
  13. // const publicPath = "./";
  14. module.exports = defineConfig({
  15. pages: {
  16. index: "src/pages/website/index.ts",
  17. editor: "src/pages/editor/index.ts",
  18. share: "src/pages/h5/share/index.ts",
  19. treeapi: "src/pages/queentree/index.ts",
  20. },
  21. publicPath: publicPath,
  22. transpileDependencies: [/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/],
  23. devServer: {
  24. client: {
  25. overlay: {
  26. errors: true,
  27. warnings: false,
  28. runtimeErrors: false,
  29. },
  30. },
  31. },
  32. configureWebpack: {
  33. plugins: [
  34. // CKEditor 5 needs its own plugin to be built using webpack.
  35. // new CKEditorTranslationsPlugin({
  36. // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
  37. // language: "zh-cn",
  38. // Append translations to the file matching the `app` name.
  39. // translationsOutputFile: /ckeditor/,
  40. // }),
  41. ],
  42. },
  43. chainWebpack: (config) => {
  44. const tsRule = config.module.rule("ts");
  45. tsRule
  46. .use("moduse-loader")
  47. .loader("moduse/webpack-loader")
  48. .options({
  49. include: [
  50. path.resolve(__dirname, "./src/modules"),
  51. path.resolve(__dirname, "./node_modules/@queenjs-modules"),
  52. ],
  53. });
  54. const tsxRule = config.module.rule("tsx");
  55. tsxRule.uses.store.delete("thread-loader");
  56. tsxRule
  57. .use("@linaria/webpack-loader")
  58. .loader("@linaria/webpack-loader")
  59. .options({
  60. // 将.css文件更名为.less
  61. extension: ".linaria.less",
  62. preprocessor: linariaLessLoader("@/styles/theme"),
  63. })
  64. .before("ts-loader");
  65. const svgRule = config.module.rule("svg");
  66. // Then you can either:
  67. //
  68. // * clear all loaders for existing 'svg' rule:
  69. //
  70. // svgRule.uses.clear();
  71. //
  72. // * or exclude ckeditor directory from node_modules:
  73. svgRule.exclude.add(path.join(__dirname, "node_modules", "@ckeditor"));
  74. // Add an entry for *.svg files belonging to CKEditor. You can either:
  75. //
  76. // * modify the existing 'svg' rule:
  77. //
  78. // svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
  79. //
  80. // * or add a new one:
  81. config.module
  82. .rule("cke-svg")
  83. .test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
  84. .use("raw-loader")
  85. .loader("raw-loader");
  86. // (2.) Transpile the .css files imported by the editor using PostCSS.
  87. // Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
  88. config.module
  89. .rule("cke-css")
  90. .test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
  91. .use("postcss-loader")
  92. .loader("postcss-loader")
  93. .tap(() => {
  94. return {
  95. postcssOptions: styles.getPostCssConfig({
  96. themeImporter: {
  97. themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
  98. },
  99. minify: true,
  100. }),
  101. };
  102. });
  103. },
  104. css: {
  105. loaderOptions: {
  106. less: {
  107. lessOptions: {
  108. modifyVars,
  109. javascriptEnabled: true,
  110. },
  111. },
  112. },
  113. },
  114. pluginOptions: {
  115. windicss: {
  116. scan: {
  117. dirs: ["node_modules/@queenjs-modules"],
  118. fileExtensions: ["tsx"],
  119. },
  120. preflight: false,
  121. onOptionsResolved: (options) => {
  122. // make sure file @apply's get transformed
  123. options.scanOptions.extraTransformTargets = {
  124. css: [
  125. (f) => {
  126. if (/node_modules\\@queenjs-modules\\.+\.(css|less)/.test(f)) {
  127. return true;
  128. }
  129. return false;
  130. },
  131. ],
  132. detect: [],
  133. };
  134. return options;
  135. },
  136. },
  137. },
  138. });