vue.config.js 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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. //打包分析
  7. module.exports = {
  8. publicPath: "./", // 默认'/',部署应用包时的基本 URL
  9. indexPath: 'index.html', // 相对于打包路径index.html的路径
  10. outputDir: 'dist', // 'dist', 生产环境构建文件的目录
  11. assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
  12. lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  13. runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  14. productionSourceMap: !IS_PROD, // 生产环境的 source map
  15. chainWebpack: config => {
  16. config.resolve.symlinks(true); // 修复热更新失效
  17. // 添加别名
  18. config.resolve.alias
  19. .set('@', resolve('src'))
  20. .set('@api', resolve('src/api'))
  21. .set('@tools', resolve('src/tools'))
  22. .set('@assets', resolve('src/assets'))
  23. .set('@components', resolve('src/components'))
  24. .set('@views', resolve('src/views'))
  25. .set('@router', resolve('src/router'))
  26. .set('@store', resolve('src/store'))
  27. .set('@layout',resolve('src/layout'))
  28. .set('@utils',resolve('src/utils'))
  29. .set('@jsonData', resolve('src/jsonData'));
  30. // 压缩图片
  31. if (IS_PROD) {
  32. config.module
  33. .rule("images")
  34. .use("image-webpack-loader")
  35. .loader("image-webpack-loader")
  36. .options({
  37. mozjpeg: { progressive: true, quality: 65 },
  38. optipng: { enabled: false },
  39. pngquant: { quality: [0.65, 0.9], speed: 4 },
  40. gifsicle: { interlaced: false }
  41. // webp: { quality: 75 }
  42. });
  43. }
  44. },
  45. css: {
  46. loaderOptions: {
  47. sass: {
  48. prependData: `@import "./src/assets/css/default";`,
  49. },
  50. },
  51. },
  52. // 去掉console.log
  53. configureWebpack: config => {
  54. if (IS_PROD) {
  55. const plugins = [];
  56. plugins.push(
  57. new UglifyJsPlugin({
  58. uglifyOptions: {
  59. compress: {
  60. drop_console: true,
  61. drop_debugger: false,
  62. pure_funcs: ["console.log"] //移除console
  63. }
  64. },
  65. sourceMap: false,
  66. parallel: true
  67. })
  68. );
  69. config.plugins = [...config.plugins, ...plugins];
  70. }
  71. },
  72. devServer: {
  73. //代理配置
  74. proxy:{
  75. //这里的api表示请求的地址有apizzzs,就触发代理机制
  76. '/apizzz':{
  77. target:'www.baidu.com',//我们要代理的地址
  78. changeOrigin:true,//是否跨域
  79. pathRewrite:{
  80. //'^/api',''//假设想把 localhost:8080/api/login 变成www.baidu.com/login就需要这么做
  81. }
  82. }
  83. },
  84. open: true, // 是否打开浏览器
  85. },
  86. //打包分析
  87. }