vue.config.js配置

//引入webpack
// const webpack = require('webpack');
const path = require('path');
// const { config } = require('process');
// const resolve = dir => path.resolve(__dirname, dir)

// const Version = new Date().getTime();  //当前时间为了防止打包缓存不刷新,所以给每个js文件都加一个时间戳
module.exports = {
    // 显式转义依赖
    // transpileDependencies: ['webpack-dev-server/client'],
    //基本路径
    publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
    // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    // assetsDir: 'static',
    // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
    // outputDir: "dist",
    // 输出文件
    outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
    // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
    productionSourceMap: false,
    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
    // indexPath: 'index.html',
    // 是否在保存时检查
    lintOnSave: true,
    configureWebpack:(config) => {
  	config.resolve = {  //配置解析别名
        extensions: ['.js','.json','.vue'],//自动添加文佳名后缀
        alias: {
          '@':path.resolve(__dirname,'./src'),
          'public': path.resolve(__dirname,'public'),
          'components': path.resolve(__dirname,'./src/components'),
          'common': path.resolve(__dirname,'./src/common'),
          'api': path.resolve(__dirname,'./src/api'),
          'data': path.resolve(__dirname,'./src/data'),
        }
      }
    //     performance: {
    //         hints: 'warning',
    //         //入口起点的最大体积 整数类型(以字节为单位)
    //         maxEntrypointSize: 50000000,
    //         //生成文件的最大体积 整数类型(以字节为单位 300k)
    //         maxAssetSize: 30000000,
    //         //只给出 js 文件的性能提示
    //         assetFilter: function (assetFilename) {
    //             return assetFilename.endsWith('.js');
    //         }
    //     },
    //     output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
    //         // publicPath: './',
    //         // path: config.build.assetsDir,
    //         filename: `js/[name]_${Version}.js`,
    //         chunkFilename: `js/[name]_${Version}.js`
    //     }
     	},
    // chainWebpack: config => {
    //     config.entry.app = ['babel-polyfill', './src/main.js'];
    //     // 修复HMR
    //     config.resolve.symlinks(true)
    //     //修复 Lazy loading routes Error
    //     // config.plugin('preload')
    //     //     .tap(args => {
    //     //         args[0].fileBlacklist.push(/\.css/, /\.js/)
    //     //         return args
    //     //     })
    //     config.plugin('html').tap(args => {
    //         // args[0].chunksSortMode = 'none';
    //         //args[0].inlineSource = '(\.css|\.js$)'
    //         args[0].title = 'vue项目标题'
    //         return args;
    //     });
    //     // 富文本图片缩小放大 插件
    //     config.plugin('provide').use(webpack.ProvidePlugin, [{
    //         'window.Quill': 'quill'
    //     }]);
    //     // 添加别名
    //     // config.resolve.alias
    //     //     .set('@', resolve('src'))
    //     //     .set('assets', resolve('src/assets'))
    //     //     .set('components', resolve('src/components'))
    //     //     .set('layout', resolve('src/layout'))
    //     //     .set('base', resolve('src/base'))
    //     //     .set('static', resolve('src/static'));
    //     //压缩图片
    //     // config.module
    //     //     .rule("images")
    //     //     .use("image-webpack-loader")
    //     //     .loader("image-webpack-loader")
    //     //     .options({
    //     //         mozjpeg: { progressive: true, quality: 65 },
    //     //         optipng: { enabled: false },
    //     //         pngquant: { quality: "65-90", speed: 4 },
    //     //         gifsicle: { interlaced: false },
    //     //         webp: { quality: 75 }
    //     //     });

    //     // 打包分析
    //     // if (process.env.IS_ANALYZ) {
    //     //     config.plugin('webpack-report')
    //     //         .use(BundleAnalyzerPlugin, [{
    //     //             analyzerMode: 'static',
    //     //         }]);

    //     // }
    // },
    // css相关配置
    css: {
      // 是否使用css分离插件
      extract: true,
      // 开启 css source maps?
      sourceMap: false,
      // css预设器配置项
      loaderOptions: {
        sass: {
            data: `@import "./src/styles/main.scss";` //css主文件入口
        }
      },
      modules: false
    },
    parallel: require('os').cpus().length > 1,
    /*
      PWA相关配置
    */
    pwa:{},
    //webpack-dev-server相关配置
    devServer: {
        open: false,
        host: "0.0.0.0",
        port: 8080,
        overlay: {
            warnings: true,
            errors: true
        },
        https: false,// 编译失败时刷新页面
        hot: true,// 开启热加载
        hotOnly: false,
        proxy: {
            "/api": {
                target: "http://ip:8888",// ip为ip地址
                // 如果要代理 websockets
                ws: true,
                changeOrigin: true,
                //pathRewrite:{"^/api":""}
            }
        }
    },
    /*
      第三方插件配置
    */
   pluginOptions: {}
}
<think>好的,用户的问题是关于如何在vue.config.js配置renderer。我需要先理解用户的需求。用户可能在使用Vue.js时遇到了需要配置渲染器的情况,尤其是在使用运行时构建版本时,可能需要通过render函数来定义组件,而不是使用模板。因为根据引用[2],vue.runtime.xxx.js没有模板解析器,必须使用render函数。 接下来,我需要回忆Vue配置文件中如何设置renderer。通常,render函数是在Vue组件的选项中直接定义的,而不是在vue.config.js配置。但用户可能是指如何在整个项目中配置相关的Webpack设置,以支持render函数的使用,或者可能是预渲染(prerender)的配置,比如使用prerender-spa-plugin,这在引用[3]中提到过。 首先,检查引用内容。引用[2]提到vue.config.js用于配置,比如关闭生产提示,修改构建配置。引用[3]展示了configureWebpack的使用,添加了Workbox插件和预渲染。可能用户想了解如何配置预渲染,这涉及到生成静态页面的renderer。 用户的问题可能有歧义。如果是关于Vue组件中的render函数,那么不需要在vue.config.js配置,而是在组件中直接写。如果是预渲染,则需要安装prerender-spa-plugin并在vue.config.js中添加配置。 另外,可能用户混淆了render函数和渲染器的概念。Vue的运行时版本需要render函数来渲染组件,而vue.config.js中的配置更多是关于Webpack的调整,比如修改入口、插件等。所以需要明确用户的具体需求。 根据引用[3],预渲染的配置示例中使用了prerender-spa-plugin,这可能和renderer相关。所以,正确的步骤应该是安装该插件,然后在configureWebpack中添加对应的插件配置,指定路由和渲染选项。需要确保用户的环境变量正确,以及路由配置适合预渲染。 总结,用户可能需要的是如何通过vue.config.js配置预渲染,这涉及到使用prerender-spa-plugin,并设置需要预渲染的路由。同时,提醒用户注意运行时版本和完整版的区别,确保使用render函数而不是模板。</think>在 Vue.js 项目中,`vue.config.js` 中配置 `renderer` 通常与**预渲染(Prerendering)**或**服务端渲染(SSR)**相关。根据引用[3]提到的预渲染配置示例,以下是具体实现步骤: --- ### 1. **安装预渲染插件** ```bash npm install prerender-spa-plugin --save-dev ``` --- ### 2. **在 `vue.config.js` 中配置预渲染** ```javascript const PrerenderSPAPlugin = require('prerender-spa-plugin'); const path = require('path'); module.exports = { configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { config.plugins.push( new PrerenderSPAPlugin({ // 静态文件输出路径(需与打包路径一致) staticDir: path.join(__dirname, 'dist'), // 需要预渲染的路由列表 routes: ['/', '/about', '/contact'], // 渲染器配置(如无头浏览器设置) renderer: new PrerenderSPAPlugin.PuppeteerRenderer({ inject: {}, // 可注入全局变量 headless: true, // 是否启用无头模式 renderAfterDocumentEvent: 'app-mounted', // 等待事件触发后渲染 }) }) ); } } }; ``` --- ### 3. **关键配置说明** 1. **`routes`** 指定需要预渲染的路由路径,例如静态页面 `/about`。 2. **`renderer`** 使用 `PuppeteerRenderer` 作为渲染引擎,通过无头浏览器生成 HTML: - `headless: true` 表示不显示浏览器界面[^3]; - `renderAfterDocumentEvent` 表示等待 Vue 应用触发特定事件(如 `app-mounted`)后再渲染,确保数据加载完成[^3]。 --- ### 4. **注意事项** - **路由模式** 需使用 `history` 模式(而非 `hash` 模式),否则预渲染可能失效。 - **动态内容** 预渲染仅适用于静态内容,动态数据需结合接口预取或服务端渲染(SSR)[^3]。 - **兼容性** 若需兼容旧版浏览器,可通过 `renderer` 配置中的 `args` 添加 Chrome 启动参数,例如: ```javascript renderer: new PrerenderSPAPlugin.PuppeteerRenderer({ args: ['--no-sandbox', '--disable-setuid-sandbox'] }) ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值