nuxt.config.js 配合微前端qiankun打包配置


const CompressionPlugin = require('compression-webpack-plugin')
const timeStamp = new Date().getTime();
export default {
  /*
   ** Nuxt rendering mode
   ** See https://nuxtjs.org/api/configuration-mode
   */
  mode: 'spa',
  ssr: false,
  /*
   ** Nuxt target
   ** See https://nuxtjs.org/api/configuration-target
   */
  target: 'server',
  // 不参与nuxt数据收集
  telemetry: false,
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~/assets/css/element-variables.scss',
    '~/assets/css/base.scss',
    '~/assets/css/page.scss',
  ],

  styleResources: {
    scss: '@/assets/css/variables.scss',
  },

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/element-ui',
    '@/plugins/axios',
    '@/plugins/common',
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    // '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/stylelint
    // '@nuxtjs/stylelint-module',
    "@nuxtjs/style-resources",
  ],

  router: {
    routeNameSplitter: '/',
  },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@femessage/nuxt-micro-frontend',
    'cookie-universal-nuxt',
  ],

  MFE: {
    force: true
  },

  server: {
    host: '0.0.0.0',
    port: '15008',
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true,
    // prefix: '/api',
    retry: { retries: 3 },
    common: {
      contentType: 'application/json',
    },
  },

  proxy: {
    '/api/': {
      target: process.env.baseUrl || 'http://127.0.0.1:30080',
      secure: false,
      logLevel: 'debug',
      pathRewrite: {
        '^/api': '',
        changeOrigin: true,
      },
      xfwd: false,
    },
  },
  generate: {
    fallback: 'index.html',
    dir: 'dist/h-rad-engine/',
  },
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/^element-ui/],
    publicPath: '/microapps/h-rad-engine',
    optimization: {
      splitChunks: {
        minSize: 30000,
        maxSize: 250000,
      },
    },
    extend(config, { isDev, isClient, isServer }) {
      config.output.filename = `js/[name].${timeStamp}.js`
      config.output.chunkFilename = `js/chunk.[id].${timeStamp}.js`
    },
    plugins: [
      new CompressionPlugin({
        filename: '[path].gz[query]', //  使得多个.gz文件合并成一个文件,这种方式压缩后的文件少
        test: /\.js$|\.html$|\.css|png|svg|jpg|jpeg/, // 匹配文件名
        threshold: 10240, // 对超过10kb的数据进行压缩
        deleteOriginalAssets: false, // 是否删除原文件
      }),
    ],
    configureWebpack: {
      output: {
        // 微应⽤的包名,这⾥与主应⽤中注册的微应⽤名称⼀致
        library: 'h-rad-engine',
        // 将你的 library 暴露为所有的模块定义下都可运⾏的⽅式
        libraryTarget: 'umd',
        // 按需加载相关,设置为 webpackJsonp_微应⽤名称 即可
        chunkLoadingGlobal: `webpackJsonp_h-rad-engine`,
      },
    },
  },
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nuxt.js 是一个基于 Vue.js 的通用应用框架,它可以让你更快速、更轻松地开发应用程序。Nuxt.js 3 是 Nuxt.js 的最新版本,它提供了全新的架构和 API,具有更好的性能和更好的扩展性。下面是关于 Nuxt.js 3 中的 SEO 优化配置的介绍。 Nuxt.js 3 中的 SEO 优化配置主要是通过 nuxt.config.js 文件来进行配置。下面是一些常用的 SEO 配置项: 1. head 标签配置:可以通过配置 head 对象来设置 head 标签中的元信息,如 title、meta、link 等。 2. router 配置:可以通过配置 router 对象来设置路由相关的信息,如路由的 base、mode 等。 3. generate 配置:可以通过配置 generate 对象来设置生成静态站点的相关信息,如生成路径、页面列表等。 4. sitemap 配置:可以通过配置 sitemap 对象来生成站点地图。 5. robots 配置:可以通过配置 robots 对象来生成 robots.txt 文件。 6. canonical 配置:可以通过配置 canonical 对象来设置页面的 canonical URL。 下面是一个简单的 nuxt.config.js 文件的 SEO 配置示例: ``` export default { head: { title: 'My website', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, router: { base: '/my-website/' }, generate: { dir: 'dist/my-website' }, sitemap: { hostname: 'https://www.my-website.com', gzip: true }, robots: { UserAgent: '*', Disallow: '/' }, canonical: { baseURL: 'https://www.my-website.com' } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值