vue.config.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. const path = require("path");
  2. const resolve = (dir) => path.join(__dirname, dir);
  3. // const SVGSpriteLoaderPlugin = require("svg-sprite-loader/plugin");
  4. function extendDefaultPlugins(arr) {
  5. let plug = [
  6. 'removeDoctype',
  7. 'removeXMLProcInst',
  8. 'removeComments',
  9. 'removeMetadata',
  10. 'removeEditorsNSData',
  11. 'cleanupAttrs',
  12. 'mergeStyles',
  13. 'inlineStyles',
  14. 'minifyStyles',
  15. 'cleanupIDs',
  16. 'removeUselessDefs',
  17. 'cleanupNumericValues',
  18. 'convertColors',
  19. 'removeUnknownsAndDefaults',
  20. 'removeNonInheritableGroupAttrs',
  21. 'removeUselessStrokeAndFill',
  22. 'removeViewBox',
  23. 'cleanupEnableBackground',
  24. 'removeHiddenElems',
  25. 'removeEmptyText',
  26. 'convertShapeToPath',
  27. 'convertEllipseToCircle',
  28. 'moveElemsAttrsToGroup',
  29. 'moveGroupAttrsToElems',
  30. 'collapseGroups',
  31. 'convertPathData',
  32. 'convertTransform',
  33. 'removeEmptyAttrs',
  34. 'removeEmptyContainers',
  35. 'mergePaths',
  36. 'removeUnusedNS',
  37. 'sortDefsChildren',
  38. 'removeTitle',
  39. 'removeDesc'
  40. ];
  41. return plug.concat(arr);
  42. }
  43. // 添加less继承
  44. function addStyleResource(rule) {
  45. rule.use('style-resource')
  46. .loader('style-resources-loader')
  47. .options({
  48. patterns: [
  49. resolve('src/assets/styles/common/common.less')
  50. ]
  51. })
  52. }
  53. module.exports = {
  54. publicPath: "./", // 默认'/',部署应用包时的基本 URL
  55. indexPath: 'index.html', // 相对于打包路径index.html的路径
  56. outputDir: 'dist', // 'dist', 生产环境构建文件的目录
  57. assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
  58. lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  59. runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  60. chainWebpack: (config) => {
  61. config.resolve.symlinks(true); // 修复热更新失效
  62. config.plugin('html')
  63. .tap(args => {
  64. args[0].title = "智能综合分析系统";
  65. return args;
  66. })
  67. // 路径别名
  68. config.resolve.alias
  69. .set("@", resolve("src"))
  70. .set("@node", resolve("node_modules"))
  71. .set("@com", resolve("src/components"))
  72. .set("@assets", resolve("src/assets"))
  73. .set("@api", resolve("src/api"))
  74. .set("@store", resolve("src/store"))
  75. .set("@modeConfig", resolve("public/static/config"))
  76. .set("@tools", resolve("src/tools"));
  77. // less 继承
  78. const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
  79. types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)));
  80. // svg 雪碧图
  81. config.module // 排除其他svg-loader
  82. .rule('svg')
  83. .exclude.add(resolve('src/assets/icon/svg'))
  84. .end()
  85. .exclude.add(resolve('src/assets/icon/svg_fill'))
  86. .end();
  87. // svg雪碧图
  88. const svgRule = config.module.rule('icons');
  89. svgRule.test(/\.svg$/)
  90. .include.add(resolve('src/assets/icon/svg'))
  91. .end()
  92. .use('svg-sprite-loader')
  93. .loader('svg-sprite-loader')
  94. .options({
  95. symbolId: 'svg-[name]',
  96. // extract: true,
  97. // publicPath: "img/",
  98. // spriteFilename: "svg-sprite-[hash:8].svg",
  99. });
  100. // config
  101. // .plugin("svgsprite")
  102. // .use(SVGSpriteLoaderPlugin, [{
  103. // plainSprite: true
  104. // }]);
  105. // svgo 去除svg中无用元素
  106. svgRule.use('svgo-loader').loader('svgo-loader').options({
  107. plugins: extendDefaultPlugins([{
  108. name: "removeAttrs",
  109. params: {
  110. attrs: 'fill',
  111. }
  112. }])
  113. });
  114. // svg雪碧图 不去除fill属性
  115. // const svgRuleFill = config.module.rule('icons_fill');
  116. // svgRuleFill.test(/\.svg$/)
  117. // .include.add(resolve('src/assets/icon/svg_fill'))
  118. // .end()
  119. // .use('svg-sprite-loader')
  120. // .loader('svg-sprite-loader')
  121. // .options({
  122. // symbolId: 'fill-[name]',
  123. // // extract: true,
  124. // // publicPath: "img/",
  125. // // spriteFilename: "svg-sprite-[hash:8].svg",
  126. // });
  127. // // config
  128. // // .plugin("svgsprite")
  129. // // .use(SVGSpriteLoaderPlugin, [{
  130. // // plainSprite: true
  131. // // }]);
  132. // // svgo 去除svg中无用元素
  133. // svgRuleFill.use('svgo-loader').loader('svgo-loader').options({
  134. // plugins: extendDefaultPlugins([])
  135. // });
  136. },
  137. devServer: {
  138. //代理配置
  139. proxy: {
  140. '/cbk': {
  141. target: 'https://h5.caibeike.com.cn/', // 请求地址
  142. changeOrigin: true, // 在vue-cli3中,默认changeOrigin的值是true,意味着服务器host设置成target,这与vue-cli2不一致,vue-cli2这个默认值是false
  143. // changeOrigin的值是true,target是host, request URL是http://baidu.com
  144. // 如果设置changeOrigin: false,host就是浏览器发送过来的host,也就是localhost:8082。
  145. pathRewrite: { // 路径重写,eg:把api接口替换为''
  146. '^/cbk': ''
  147. }
  148. }
  149. },
  150. open: false, // 是否打开浏览器
  151. }
  152. }