config

const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); function resolve(dir) {   // 路径可能与你的项目不同   return path.join(__dirname, dir) } module.exports = {   outputDir: process.env.outputDir, //打包生成目录   //axios域代理,解决axios跨域问题   publicPath: '/',   lintOnSave:     process.env.NODE_ENV === "local",   productionSourceMap: process.env.VUE_APP_TITLE !== 'prod', // 生产模式是否生成 sourceMap 文件   // css相关配置   css: {     extract: false, // 是否使用css分离插件 ExtractTextPlugin     sourceMap: true, // 开启 CSS source maps     loaderOptions: {     css: {}, // 这里的选项会传递给 css-loader     postcss: {} // 这里的选项会传递给 postcss-loader     }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions     modules: false // 启用 CSS modules for all css / pre-processor files.   },   devServer: {     historyApiFallback: true,     overlay: {       warnings: process.env.NODE_ENV === "local",       errors: process.env.NODE_ENV === "local"     },     proxy: {       "/aem": {         target: 'https://akamai.wwwint.brandap.ford.com',         changeOrigin: true,         secure: false,         ws: true,         pathRewrite: {           '^/aem': 'https://akamai.wwwint.brandap.ford.com'         }       },       "/qaaem": {         target: 'https://wwwqa.lincolnstore.com.cn',         changeOrigin: true,         secure: false,         ws: true,         pathRewrite: {           '^/qaaem': 'https://wwwqa.lincolnstore.com.cn'         }       }     }   },
  chainWebpack: config => {     config.plugins.delete('preload')     config.plugins.delete('prefetch')     //svg rule loader     config.output.filename('[name].[hash].js').end()     const svgRule = config.module.rule('svg')//找到svg-loader     svgRule.uses.clear()//清除已有的loader,如果不这样做会添加在此loader之后     svgRule.exclude.add(/node_modules/)//正则匹配排除node_modules目录     svgRule//添加svg新的loader处理       .test(/\.svg$/)       .use('svg-sprite-loader')       .loader('svg-sprite-loader')       .options({         symbolId: 'icon-[name]'       })
    //修改images loader 添加svg处理     const imagesRule = config.module.rule('images')     imagesRule.exclude.add(resolve('src/icons'))     config.module       .rule('images')       .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    config.module       .rule('fonts')       .test(/\.(woff?|eot|ttf|otf)(\?.*)?$/)       .use('url-loader')       .loader('url-loader')       .options({         limit: 1000       })   },   configureWebpack: (config) => {     config["externals"]={       BMap:"BMap"     };     // 判断是否进行预渲染     if (process.env.NODE_ENV !== "dev1") return;     return {       plugins: [         new PrerenderSPAPlugin({           // 生成文件的路径,也可以与webpakc打包的一致。           // 下面这句话非常重要!!!           // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。           staticDir: path.join(__dirname, 'dist'),           indexPath: path.join(__dirname, 'dist', 'index.html'),           // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。           // routes: ['/homepage', '/about/lincoln-way', '/vehicles', '/vehiclesDetail', '/forms/request-test-drive', '/locate-dealer', '/my-lincoln/my-profile', '/merchandise', '/finance'],           routes: ['/homepage', '/about/lincoln-way', '/vehiclesDetail'],           // 这个很重要,如果没有配置这段,也不会进行预编译           renderer: new Renderer({             inject: {               foo: 'bar'             },             headless: true,             // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。             renderAfterDocumentEvent: 'render-event'           })         })       ]     };   } };
上一篇:Vue动态组件的实践与原理探究


下一篇:webpack学习---css兼容性问题