最近按公司需求使用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',
// ]
},
})