Nuxt3项目中的nuxt.config.ts文件配置

最近按公司需求使用Nuxt3框架,做了一个SEO官网,其中nuxt.config.ts文件的配置内容

// https://nuxt.com/docs/api/configuration/nuxt-config
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import legacyPlugin from '@vitejs/plugin-legacy';
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  ssr: true,
  devtools: { enabled: true },
  vite: {
    css: {
      preprocessorOptions: {
    // 这里虽然是全局引入scss文件,但是打包时,会导致文件体积变大,建议在app.vue文件中引入
        scss: {
          // additionalData: '@use "~/assets/css/element.scss" as *;@use "~/assets/css/base.scss" as *;@use "~/assets/css/normalize.scss" as *;@use "~/assets/css/iconfont.css" as *;@use "~/assets/css/base.ignore.scss" as *;'
          additionalData: '@use "~/assets/css/base.scss" as *;@use "~/assets/css/iconfont.css" as *;'
        }
      }
    },
    build: {
      rollupOptions: {
        output: {
          // 针对 id 进行分包,减轻 node_modules 构建后的大小,提高运行速度
          // 具体 对哪些依赖包分包,可以按照依赖分析工具具体分包,也可以根据你package.json依赖进行分包
          manualChunks: (id) => {
            if (id.includes('vue-i18n')) {
              return 'i18n';
            } else if (id.includes('vant')) {
              return 'vantUI';
            } else if (id.includes('element')) {
              return 'elementPlugins';
            } else if (id.includes('css')) {
              return 'styleCss';
            } else if (id.includes('pinyin')) {
              return 'pinyinPlugins';
            } else if (id.includes('pinia')) {
              return 'piniaPlugins';
            }
          },
        },
      },
      minify: "terser",
      terserOptions: {
        compress: {
          // 需要通过npm或pnpm在本地安装terser
          // 只移除console.log,其他如console.error不移除
          // drop_console: ['log'],
          drop_console: ['log'],
          drop_debugger: true,
        },
        format: {
          comments: false, // 删除注释
        },
      },
    },
    plugins: [
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      // 浏览器兼容问题配置(打包后兼容低版本浏览器)
      legacyPlugin({
        targets: ["defaults", "ie >= 11", "chrome >= 52"], // 需要兼容的目标列表,可以设置多个
        additionalLegacyPolyfills: ["regenerator-runtime/runtime"], // 面向IE11时需要此插件
        renderLegacyChunks: true,
        polyfills: [
          "es.symbol",
          "es.array.filter",
          "es.promise",
          "es.promise.finally",
          "es/map",
          "es/set",
          "es.array.for-each",
          "es.object.define-properties",
          "es.object.define-property",
          "es.object.get-own-property-descriptor",
          "es.object.get-own-property-descriptors",
          "es.object.keys",
          "es.object.to-string",
          "web.dom-collections.for-each",
          "esnext.global-this",
          "esnext.string.match-all"
        ]
      })
    ],
  },
  plugins: [
    // ssr: Boolean (默认为 true) 如果值为 false,该文件只会在客户端被打包引入
    { src: '~/assets/js/iconfont.js', ssr: true }
  ],
  modules: ['@element-plus/nuxt', '@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt', '@vant/nuxt'],
  build: {
    transpile: ['pinia-plugin-persistedstate'],
    // analyze: {
    //   // 是否启用分析工具,默认为 false
    //   enabled: true,
    //   // 分析报告的输出目录,默认为 '.nuxt/analyze'
    //   reportFilename: '.nuxt/analyze/report.html',
    //   // 是否在浏览器中自动打开分析报告,默认为 false
    //   open: true,
    //   // 分析器类型,可选值有 'webpack-bundle-analyzer' 和 'source-map-explorer'
    //   analyzerMode: 'server',
    //   // 分析服务器的端口号
    //   port: 8888,
    //   // 其他 webpack-bundle-analyzer 配置项
    //   generateStatsFile: false,
    //   statsFilename: '.nuxt/analyze/stats.json',
    //   statsOptions: null,
    //   logLevel: 'info',
    // },
  },
  // elementPlus: { /** Options */ },
  // 运行时的全局变量
  runtimeConfig: {
    count: 1,
    // 服務端和客戶端都可以
    public: {
      // 生产
      baseURL: "https://www.xxx.cn",
      imgURL: "https://www.xxx.cn",

    }
  },
  devServer: {
    host: '192.168.0.156',//自己电脑的Ip
    port: 3000,
  },
  nitro: {
    // 开启gzip压缩
    compressPublicAssets: true,
    // plugins: [
    //   '~/mixin/nitro-hooks.ts',
    // ]
  },
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值