美文网首页
多项目配置

多项目配置

作者: world_7735 | 来源:发表于2021-08-26 18:40 被阅读0次

    package.js

     "scripts": {
        "serve": "vue-cli-service serve",
        "build:pc": "vue-cli-service build pc",
        "build:m": "vue-cli-service build m",
        "lint": "eslint --fix --ext .js,.vue src"
      },
    

    vue.config.js

    // 代码压缩
    const TerserPlugin = require('terser-webpack-plugin')
    // gzip压缩
    const CompressionPlugin = require('compression-webpack-plugin')
    const webpack = require('webpack')
    const path = require('path')
    // var proEnv = require('./config/pro.env') // 生产环境
    // var devEnv = require('./config/dev.env') // 本地环境
    // 默认是本地环境
    const env = process.env.NODE_ENV
    let writeEnv = ''
    if (env === 'production') { // 生产环境
      writeEnv = require('./config/pro.env') // 生产环境
    } else { // 本地环境
      // 测试
      writeEnv = require('./config/dev.env') // 本地环境
    }
    function resolve(dir) {
      return path.join(__dirname, dir)
    }
    
    const HOST = '0.0.0.0'
    const PORT = '8045'
    
    // const DEV_URL = 'http://teamworkapi.mokingsoft.com';
    // const DEV_URL = 'https://pmp.yangguangqicai.com/api'
    
    // const pages = {
    //   m: {
    //     entry: 'src/pages/m/main.js',
    //     template: 'public/m.html',
    //     filename: 'index.html',
    //     chunks: ['chunk-vendors', 'chunk-common', 'm']
    //   },
    //   pc: {
    //     entry: 'src/pages/pc/main.js',
    //     template: 'public/pc.html',
    //     filename: 'index.html',
    //     chunks: ['chunk-vendors', 'chunk-common', 'pc']
    //   }
    
    // }
    const projectname = process.argv[3] // 获取build后面的参数确定执行哪个文件
    function getEntry() {
      let entries = {}
      if (process.env.NODE_ENV == 'production') {
        entries = {
          index: {
            // page的入口
            entry: 'src/pages/'+projectname+'/main.js',
            // 模板来源
            template: `public/index.html`,
            // 在 dist/index.html 的输出
            // title: 'CIMS--'+projectName,
            filename: 'index.html',
            chunks: ['chunk-vendors', 'chunk-common', 'index']
          }
        }
      } else {
        let items = ['pc','m']
        for (let i in items) {
          const fileName=items[i];
          entries[fileName] = {
            entry: `src/pages/${fileName}/main.js`,
            // 模板来源
            template: `public/index.html`,
            // 在 dist/index.html 的输出
            filename: `${fileName}.html`,
            // title: 'CIMS--'+fileName,
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', fileName]
          }
        }
      }
      return entries
    }
    
    // let usedPage = {}
    // const projectname = process.argv[3] // 获取build后面的参数确定执行哪个文件
    // if (env == 'production') {
    //   usedPage[projectname] = pages[projectname]
    // } else {
    //   usedPage = pages
    // }
    const usedPage=getEntry();
    console.log(process);
    module.exports = {
      //  测试   h5:   newcrm_page_h5test    newcrm_page_test
      publicPath: process.env.NODE_ENV === 'production' ? '/newcrm_page_h5/' : '/',
      // 正式    newcrm_page_h5    newcrm_page
      // publicPath: process.env.NODE_ENV === 'production' ? '/crm_page/' : '/',
      productionSourceMap: process.env.NODE_ENV !== 'production',
      pages: usedPage,
      outputDir: 'dist/' + projectname,
      // indexPath: 'index.html', // 指定生成的index.html输出路径
      css: {
        loaderOptions: {
          less: {
            modifyVars: {
              blue: '#3a82f8',
              'text-color': '#333'
            },
            javascriptEnabled: true
          }
        }
      },
    
      devServer: {
        host: HOST,
        port: PORT,
        proxy: {
          // 配置跨域
          '/api': {
            // 要访问的跨域的api的域名
            target: `${writeEnv.hosturl}/`,
            ws: true,
            changOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          },
        }
      },
      configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置
          config.plugins.push(
            new TerserPlugin({
              // parallel:true,// 使用多进程并行运行来提高构建速度。默认并发运行数:os.cpus().length - 1。
              terserOptions: {
                ie8: true,
                compress: {
                  drop_debugger: true,
                  drop_console: true // 生产环境自动删除console
                },
                warnings: false
              }
            }),
            new CompressionPlugin({
              // gzip压缩配置
              test: /\.js$|\.html$|\.css/, // 匹配文件名
              threshold: 10240, // 对超过10kb的数据进行压缩
              deleteOriginalAssets: false, // 是否删除原文件
              algorithm: 'gzip',
              minRatio: 0.8
            }),
            // 可能中英文翻译有问题关注这个设置
            // 提取 monent 有效部分,减小体积。压缩前 611k->163k
            // en-gb 英国 en-us 美国(默认值) vi 越南 zh-cn 中国
            new webpack.ContextReplacementPlugin(
              /moment[\/\\]locale$/,
              /^\.\/(zh-cn|en-us|vi)$/i
            ) // 在vue工程中,在引入moment时,发现build之后的包比不引入moment的包文件大了整整两百多kb,后来发现webpack会把moment的语言包也一起打包
          )
        } else {
          // config.devtool = 'source-map';
          // config.devtool = false;
        }
        config.resolve = {
          extensions: ['.js', '.vue', '.json', '.css'],
          alias: {
            vue$: 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            assets: resolve('src/assets'),
            components: resolve('src/components')
          }
        }
      },
      lintOnSave: false,
      chainWebpack: config => {
        // config.module.rules.delete('svg')
        config.module
          .rule('iview')
          .test(/\.js$/)
          .use('babel')
          .loader('babel-loader')
          .end() // 此处是添加内容重点
        config.resolve.alias.set('@', resolve('src'))
      }
    }
    

    相关文章

      网友评论

          本文标题:多项目配置

          本文链接:https://www.haomeiwen.com/subject/gfbuiltx.html