vueconfigjs-配置项

// 引用 npm ip 包，用来获取本地 ip 等操作，文档地址：https://www.npmjs.com/package/ip
const ip = require('ip')
// 引用 path 包 (path 属于 node 自带包，无需在 package.json 中引用安装即可直接引用)，用来操作路径，文档地址：https://nodejs.org/docs/latest/api/path.html
const path = require('path')
// 引用 npm html-webpack-inline-plugin 包，用来将 html 中 inline 标识的 <script>,<link>,<img> 标签的元素内容压缩进 html 中
const HtmlWebpackInlinePlugin = require('html-webpack-inline-plugin')
// 引用 npm filemanager-webpack-plugin 包，用来操作文件，允许复制，归档成 (.zip/.tar/.tar.gz)，移动，删除文件和目录在构建前或者构建前，文档地址：https://www.npmjs.com/package/filemanager-webpack-plugin
const FileManagerPlugin = require('filemanager-webpack-plugin')
// 判断时候是生产环境
const isProd = process.env.NODE_ENV === 'production'
// 定义一些公用参数，以供项目中使用
const pluginOptions = {
  // 项目名，定义成我们在云平台申请的应用名，类似 ***.vivo.com.cn
  projectName: 'vhub',
  // 本地 ip
  host: ip.address(),
  // 定义端口
  port: 8080,
  // 登录的地址，需要一个 client_id
  loginPath: 'https://passport.vivo.com.cn/v3/web/login/authorize?client_id={client_id}',
  // 埋点上报的地址
  stPath: 'https://st-demo.reso.com.cn',
  // CDN 域名，在云平台申请到的项目静态资源域名
  cdnPath: '/'
}

// vue.config.js 导出的配置项
module.exports = {
  pluginOptions,
  // 测试服务启动时显示的 ip, 端口, 代理配置
  devServer: {
    // host: pluginOptions.host,
    port: pluginOptions.port,
    public: `${pluginOptions.host}:${pluginOptions.port}`,
    // 默认会自动打开浏览器
    open: true,
    disableHostCheck: true,
    proxy: {
      '/api': {
        target: 'http://172.22.182.15:8080/vhub/',
        // target: 'http://172.22.182.7:8088/vhub/',
        // target: 'http://sdcb.api.test.ves.xyz/',
        changeOrigin: true,
        secure: false,
        pathRewrite: {'^/api': '/api'}
      }
    }
  },

木易杨 @:
// 部署应用包时的基本 URL, 生成环境使用的是公用参数中的 cdnPath
  publicPath: isProd
    ? pluginOptions.cdnPath : '/',
  lintOnSave: true,
  // 是否生成 sourcemap 文件，生成环境不生成以加速生产环境构建
  productionSourceMap: !isProd,
  // 静态资源文件的目录
  assetsDir: 'static',
  // css 是否开启 sourcemap, 生成环境不生成
  css: {sourceMap: !isProd},
  configureWebpack: config => {config.optimization && (config.optimization.splitChunks.minSize = 10000)
    config.plugins.push(new HtmlWebpackInlinePlugin()
    )
    if (isProd) {
      config.plugins.push(
        // Webpack 完成捆绑过程后要执行的命令：删除 dist 目录下 ignore 目录，prod-md5-zip 目录
        new FileManagerPlugin({
          onEnd: [{
            delete: [              `./dist/ignore`,
              './prod-md5-zip'
            ]
          }]
        })
      )
    }
    // 单个 asset 静态资源文件的大小最大为 409600B==>400KB, 超过 400KB 则会给出警告
    config.performance = {maxAssetSize: 1024 * 400}
  },
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        // 将系统配置信息注入到 HtmlWebpackInlinePlugin
        Object.assign(args[0], pluginOptions)
        // 设置页面标题的 icon
        args[0].favicon = path.join(__dirname, './src/assets/aaa.ico')
        return args
      })
    config.plugin('define').tap(args => {args[0]['CONFIG'] = JSON.stringify(pluginOptions)
      return args
    })
  }
}