h5/vue.config.js

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
// const isProduction = process.env.NODE_ENV === 'production'
// 预渲染
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');

module.exports = {
    // 基本路径 baseURL已经过时
    publicPath: './',  
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false,
    // use the full build with in-browser compiler?
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    // compiler: false,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: config => {
        config.entry = ['babel-polyfill', './src/main.js']
        if (process.env.NODE_ENV === 'production') {
            config.plugins.push(
              new PrerenderSPAPlugin({
                // 生成文件的路径，也可以与webpakc打包的一致。
                // 下面这句话非常重要！！！
                // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                staticDir: path.join(__dirname, './dist'),
                indexPath: path.join(__dirname, './dist', 'index.html'),
                // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                routes: ['/home', '/fittingRoom', '/save', '/share', '/giftBox', '/giftBoxFive'],
                // renderer: new PrerenderSPAPlugin.PuppeteerRenderer({//这样写renderAfterTime生效了
                //   renderAfterTime: 5000
                // }),
                // renderAfterDocumentEvent: 'render-event'
                // 这个很重要，如果没有配置这段，也不会进行预编译
                renderer: new Renderer({
                  inject: {
                    foo: 'bar'
                  },
                  headless: false,
                  // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                  renderAfterDocumentEvent: 'render-event'
                })

              })

            )

          };
        plugins: [
            // 配置compression-webpack-plugin压缩
            new CompressionWebpackPlugin({
              algorithm: 'gzip',
              test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
              threshold: 1024,
              minRatio: 0.8
            }),
            new webpack.optimize.LimitChunkCountPlugin({
              maxChunks: 5, 
              minChunkSize: 100
            })
          ]
    },
    // vue-loader 配置项
    // https://vue-loader.vuejs.org/en/options.html
    // vueLoader: {},
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    // css相关配置
    css: {
     // 是否使用css分离插件 ExtractTextPlugin
     extract: true,
     // 开启 CSS source maps?
     sourceMap: false,
     // css预设器配置项
     loaderOptions: {
        postcss: {
            plugins: [
                require('postcss-px2rem-exclude')({ "remUnit": 75, "exclude": /node_modules/i }), // 换算的基数
            ]
        }
     },
     // 启用 CSS modules for all css / pre-processor files.
     modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // 是否启用dll
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
    // dll: false,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
        hot:true,//自动保存
        overlay: { // 让浏览器 overlay 同时显示警告和错误
            warnings: true,
            errors: true
          },
          // host: "localhost",
          host: "0.0.0.0",
          port: 8080, // 端口号
          https: false, // https:{type:Boolean}
          open: false, //配置后自动启动浏览器
          hotOnly: true, // 热更新
            // proxy: {
            //     '/api': {
            //         target: 'http://ttr.yergoo.com',//服务器协议、ip和端口号
            //         secure: false,  // 如果是https接口，需要配置这个参数
            //         ws: false,//是否代理websockets
            //         changeOrigin: true,
            //         pathRewrite:{
            //             '^/api':''
            //         }
            //     },
            // },
    },
    // 第三方插件配置
    pluginOptions: {
     // ...
    }
   }