v3-school-widescreen-web/vue.config.js

'use strict'
const path = require('path')

/*
const ip = '192.168.1.43'
const os = require('os')
const fs = require("fs")
//判断环境
let ifaces = os.networkInterfaces()
let localityIp = '', result = []
for(let dev in ifaces) {
  ifaces[dev].forEach(function(details) {
    if(localityIp === '' && details.family === 'IPv4' && !details.internal) {
      localityIp = details.address
      return;
    }
  })
}
let getFile = localityIp == ip?false:true
*/
/******** 获取git版本信息 ********/
/*
const gitHEAD = getFile ? fs.readFileSync('.git/HEAD', 'utf-8').trim() : false
const ref = getFile ? gitHEAD.split(': ')[1] : false
const develop = getFile ? gitHEAD.split('/')[2] : false
const gitVersion = getFile ? fs.readFileSync('.git/' + ref, 'utf-8').trim() : false
const buildEdition = develop && gitVersion ? develop + ': ' + gitVersion : '未配置'
const myDate = new Date()
const buildTime = myDate.getFullYear() +'-'+ (myDate.getMonth()+1) +'-'+ myDate.getDate() +' '+ myDate.getHours() +':'+ myDate.getMinutes();
const logsList = getFile ? fs.readFileSync('.git/logs/HEAD', 'utf-8').replace(/\r\n|\r/g, "\n").split("\n") : false
const buildUser = getFile ? logsList[logsList.length-2].split(" ")[2] : '未配置'
//生成随机版本编码
const revision = generateRandomString()
process.env.VUE_APP_RENEWAL_ENCODING = revision
require('fs').writeFileSync('public/version.txt', revision)
function generateRandomString() {
  let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let randomString = "";
  for (let i = 0; i < 24; i++) {
    let randomIndex = Math.floor(Math.random() * chars.length);
    randomString += chars.charAt(randomIndex);
  }
  return randomString;
}
*/
function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = process.env.VUE_APP_TITLE || '实验室安全智慧化管控系统' // 网页标题

const port = process.env.port || process.env.npm_config_port || 80 // 端口

// vue.mqttConfig.js说明
// 官方vue.mqttConfig.js文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: 'static',
  // 是否开启eslint保存检测，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // webpack-dev-server 相关配置
  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true,
  },
  //修改了sass版本从1.32.0 升级至1.39.0  以解决页面小图标偶发性乱码问题 以下css代码为同步增加
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          outputStyle: 'expanded'
        }
      }
    }
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test


    // 图片转base64
    // const imagesRule = config.module.rule('images');
    // imagesRule.uses.clear()        //清除原本的images loader配置
    // imagesRule
    //   .test(/\.(jpg|gif|png|svg)$/)
    //   .exclude
    //   .add(path.join(__dirname,"../node_modules"))//去除node_modules里的图片转base64配置
    //   .end()
    //   .use('url-loader')
    //   .loader('url-loader')
    //   .options({name:"img/[name].[hash:8].[ext]",limit: 1})

    //标记打包时间与当前git版本信息
    // config.plugin('html').tap(args => {
    //   args[0].buildUser = buildUser;
    //   args[0].buildTime = buildTime;
    //   args[0].buildEdition = buildEdition;
    //   return args
    // })
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()


    config
      .plugin('ScriptExtHtmlWebpackPlugin')
      .after('html')
      .use('script-ext-html-webpack-plugin', [{
        // `runtime` must same as runtimeChunk name. default is `runtime`
        inline: /runtime\..*\.js$/
      }])
      .end()
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        libs: {
          name: 'chunk-libs',
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: 'initial' // only package third parties that are initially dependent
        },
        elementUI: {
          name: 'chunk-elementUI', // split elementUI into a single package
          priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
          test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
        },
        echarts: {
          name: 'chunk-echarts',
          priority: 20,
          test: /[\\/]node_modules[\\/]_?echarts(.*)/
        },
        flv: {
          name: 'chunk-flv',
          priority: 20,
          test: /[\\/]node_modules[\\/]_?flv(.*)/
        },
        jsBeautify: {
          name: 'chunk-vue-js-beautify',
          priority: 20,
          test: /[\\/]node_modules[\\/]_?js-beautify(.*)/
        },
        jsencrypt: {
          name: 'chunk-vue-jsencrypt',
          priority: 20,
          test: /[\\/]node_modules[\\/]_?jsencrypt(.*)/
        },
        api: {
          name: 'chunk-api',
          test: resolve('src/api'),
          priority: 0,
          minSize: 0,
          minChunks: 1,
          enforce:true,
          reuseExistingChunk: true
        },
        assets: {
          name: 'chunk-assets',
          test: resolve('src/assets'),
          priority: 0,
          minSize: 0,
          minChunks: 1,
          enforce:true,
          reuseExistingChunk: true
        },
        commons: {
          name: 'chunk-commons',
          test: resolve('src/components'),
          priority: 0,
          minSize: 0,
          minChunks: 1,
          enforce:true,
          reuseExistingChunk: true
        },
        directive: {
          name: 'chunk-directive',
          test: resolve('src/directive'),
          priority: 0,
          minSize: 0,
          minChunks: 1,
          enforce:true,
          reuseExistingChunk: true
        },
        utils: {
          name: 'chunk-utils',
          test: resolve('src/utils'),
          priority: 0,
          minSize: 0,
          minChunks: 1,
          enforce:true,
          reuseExistingChunk: true
        },
        comprehensive: {
          name: 'chunk-views',
          test: resolve('src/views'),
          priority: 0,
          minSize: 0,
          minChunks: 1,
          enforce:true,
          reuseExistingChunk: true
        },
      }
    })
    config.optimization.runtimeChunk('single'),{
      from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
      to: './', //到根目录下
    }
  }
}