vue.config.js 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. // vue.config.js
  2. const path = require('path');
  3. const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
  4. const resolve = (dir) => path.join(__dirname, dir);
  5. const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉 console.log
  6. module.exports = {
  7. publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : "./", // 默认'/',部署应用包时的基本 URL
  8. indexPath: 'index.html', // 相对于打包路径index.html的路径
  9. outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
  10. assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
  11. lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  12. runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  13. productionSourceMap: !IS_PROD, // 生产环境的 source map
  14. parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
  15. pwa: {}, // 向 PWA 插件传递选项。
  16. chainWebpack: config => {
  17. config.resolve.symlinks(true); // 修复热更新失效
  18. // 添加别名
  19. config.resolve.alias
  20. .set('@', resolve('src'))
  21. .set('@api', resolve('src/api'))
  22. .set('@tools', resolve('src/tools'))
  23. .set('@assets', resolve('src/assets'))
  24. .set('@components', resolve('src/components'))
  25. .set('@views', resolve('src/views'))
  26. .set('@router', resolve('src/router'))
  27. .set('@store', resolve('src/store'));
  28. // 压缩图片
  29. // if (IS_PROD) {
  30. // config.module
  31. // .rule("images")
  32. // .use("image-webpack-loader")
  33. // .loader("image-webpack-loader")
  34. // .options({
  35. // mozjpeg: { progressive: true, quality: 65 },
  36. // optipng: { enabled: false },
  37. // pngquant: { quality: [0.65, 0.9], speed: 4 },
  38. // gifsicle: { interlaced: false }
  39. // // webp: { quality: 75 }
  40. // });
  41. // }
  42. },
  43. // 去掉console.log
  44. configureWebpack: config => {
  45. if (IS_PROD) {
  46. const plugins = [];
  47. plugins.push(
  48. new UglifyJsPlugin({
  49. uglifyOptions: {
  50. compress: {
  51. drop_console: true,
  52. drop_debugger: false,
  53. pure_funcs: ["console.log"] //移除console
  54. }
  55. },
  56. sourceMap: false,
  57. parallel: true
  58. })
  59. );
  60. config.plugins = [...config.plugins, ...plugins];
  61. }
  62. },
  63. pages: {
  64. index: {
  65. // page 的入口
  66. entry: 'src/main.js',
  67. // 模板来源
  68. template: 'public/index.html',
  69. // 在 dist/index.html 的输出
  70. filename: 'index.html',
  71. // 当使用 title 选项时,
  72. // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  73. title: '国电电力宁夏新能源集中监控系统',
  74. // 在这个页面中包含的块,默认情况下会包含
  75. // 提取出来的通用 chunk 和 vendor chunk。
  76. chunks: ['chunk-vendors', 'chunk-common', 'index']
  77. },
  78. },
  79. devServer: {
  80. open: true, // 是否打开浏览器
  81. }
  82. }