byte-sailing-storage/vue.config.js

const path = require('path')
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const GenerateAssetPlugin = require('generate-asset-webpack-plugin')

const Timestamp = new Date().getTime()

const createServerConfig = function (compilation) {
  let config = { version: new Date().getTime() }
  return JSON.stringify(config)
}

const resolve = dir => {
  return path.join(__dirname, dir)
}

// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
// iview-admin线上演示打包路径： https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/'
  : '/';
const ip = 'http://36.134.91.96:10001/api'
//const ip = 'https://cfm.bytesail.cn/api'
module.exports = {
  devServer: {
    port: "8081", //代理端口
    open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      '/api': {
				//本地服务接口地址
				target: ip,
				//远程演示服务地址,可用于直接启动项目
				//target: 'https://saber.bladex.vip/api',
				ws: true,
				pathRewrite: {
					'^/api': '/'
				}
			},
    }
  },
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  publicPath: BASE_URL,
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: true,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
  },
  // 设为false打包时不生成.map文件
  productionSourceMap: false,
  configureWebpack: config => {
    // 开发环境不需要gzip 生产环境时清空所有console
    if (process.env.NODE_ENV !== 'production') return
    else config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    config.plugins.push(
      new CompressionWebpackPlugin({
        // 正在匹配需要压缩的文件后缀
        test: /\.(js|css|svg|woff|ttf|json|html)$/,
        // 大于10kb的会压缩
        threshold: 10240
        // 其余配置查看compression-webpack-plugin
      })
    )
    config.plugins.push(
      new GenerateAssetPlugin({
        filename: 'version.json',
        fn: (compilation, cb) => {
          cb(null, createServerConfig(compilation))
        },
        extraFiles: []
      })
    )
    config.plugins.push(
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    )
    config.output.filename = `js/[name].${Timestamp}.js`
    config.output.chunkFilename = `js/[name].${Timestamp}.js`
  }
  // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
  // devServer: {
  //   proxy: 'localhost:3000'
  // }

}