vue.config.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. const path = require('path')
  2. const webpack = require('webpack')
  3. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  4. const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
  5. const Timestamp = new Date().getTime()
  6. const createServerConfig = function (compilation) {
  7. let config = { version: new Date().getTime() }
  8. return JSON.stringify(config)
  9. }
  10. const resolve = dir => {
  11. return path.join(__dirname, dir)
  12. }
  13. // 项目部署基础
  14. // 默认情况下,我们假设你的应用将被部署在域的根目录下,
  15. // 例如:https://www.my-app.com/
  16. // 默认:'/'
  17. // 如果您的应用程序部署在子路径中,则需要在这指定子路径
  18. // 例如:https://www.foobar.com/my-app/
  19. // 需要将它改为'/my-app/'
  20. // iview-admin线上演示打包路径: https://file.iviewui.com/admin-dist/
  21. const BASE_URL = process.env.NODE_ENV === 'production'
  22. ? '/'
  23. : '/'
  24. module.exports = {
  25. devServer: {
  26. port: "8080", //代理端口
  27. open: false, //项目启动时是否自动打开浏览器,我这里设置为false,不打开,true表示打开
  28. headers: {
  29. 'Access-Control-Allow-Origin': '*',
  30. },
  31. proxy: {
  32. '/stockWater': {
  33. //本地服务接口地址
  34. target: 'http://192.168.1.112:8300',
  35. //远程演示服务地址,可用于直接启动项目
  36. //target: 'https://saber.bladex.vip/api',
  37. ws: true,
  38. pathRewrite: {
  39. '^/api': '/'
  40. }
  41. },
  42. }
  43. },
  44. // Project deployment base
  45. // By default we assume your app will be deployed at the root of a domain,
  46. // e.g. https://www.my-app.com/
  47. // If your app is deployed at a sub-path, you will need to specify that
  48. // sub-path here. For example, if your app is deployed at
  49. // https://www.foobar.com/my-app/
  50. // then change this to '/my-app/'
  51. publicPath: BASE_URL,
  52. // tweak internal webpack configuration.
  53. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  54. // 如果你不需要使用eslint,把lintOnSave设为false即可
  55. lintOnSave: true,
  56. chainWebpack: config => {
  57. config.resolve.alias
  58. .set('@', resolve('src')) // key,value自行定义,比如.set('@@', resolve('src/components'))
  59. .set('_c', resolve('src/components'))
  60. },
  61. // 设为false打包时不生成.map文件
  62. productionSourceMap: false,
  63. configureWebpack: config => {
  64. // 开发环境不需要gzip 生产环境时清空所有console
  65. if (process.env.NODE_ENV !== 'production') return
  66. else config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
  67. config.plugins.push(
  68. new CompressionWebpackPlugin({
  69. // 正在匹配需要压缩的文件后缀
  70. test: /\.(js|css|svg|woff|ttf|json|html)$/,
  71. // 大于10kb的会压缩
  72. threshold: 10240
  73. // 其余配置查看compression-webpack-plugin
  74. })
  75. )
  76. config.plugins.push(
  77. new GenerateAssetPlugin({
  78. filename: 'version.json',
  79. fn: (compilation, cb) => {
  80. cb(null, createServerConfig(compilation))
  81. },
  82. extraFiles: []
  83. })
  84. )
  85. config.plugins.push(
  86. new webpack.ProvidePlugin({
  87. $: 'jquery',
  88. jQuery: 'jquery',
  89. 'window.jQuery': 'jquery'
  90. })
  91. )
  92. config.output.filename = `js/[name].${Timestamp}.js`
  93. config.output.chunkFilename = `js/[name].${Timestamp}.js`
  94. }
  95. // 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为 '' ,即空字符串
  96. // devServer: {
  97. // proxy: 'localhost:3000'
  98. // }
  99. }