文章目录
前言
这篇文章介绍一下 Nuxt 3 搭建项目时常用的配置项，包括一些移动端专属的配置项，Nuxt配置写在根目录的nuxt.config文件里，看了这篇文章，相信有助于大家对Vue项目的迁移，尝鲜Nuxt3。
Nuxt可以用一个nuxt.config文件轻松配置，该文件可以有js, ts or mjs扩展名。如果配置中有更改时，Nuxt将完全重新启动，所以无需手动重启服务或刷新浏览器，确实方便了不少。
一、使用Sass(Scss)
npm i -D sass
（可选）将 assets/css 目录里的scss文件引入全局使用（包含在每个页面中）。
export default defineNuxtConfig({
//...
css: ['~/assets/css/app.scss', '~/assets/css/main.scss'],
});
二、配置Pinia及持久化存储
1. Pinia
npm install pinia @pinia/nuxt
export default defineNuxtConfig({
// ...
modules: [
'@pinia/nuxt',
{
autoImports: [
// 自动引入 `defineStore()`
'defineStore',
//（可选）自动引入 `defineStore()` 并重命名为 `definePiniaStore()`
['defineStore', 'definePiniaStore'],
],
},
],
})
更多配置参考官方文档：
2. 使用插件为 Pinia Store 提供持久化存储
npm i -D @pinia-plugin-persistedstate/nuxt
export default defineNuxtConfig({
// ...
modules: [
// ...
'@pinia-plugin-persistedstate/nuxt',
],
})
更多配置参考官方文档：
3.使用demo
// stores/counter.ts
const delay = (t: number) => new Promise(r => setTimeout(r, t));
export const useCounterStore = definePiniaStore('state', {
state: () => {
return {
n: 1,
numbers: [] as number[],
};
},
getters: {
double: state => state.n * 2,
},
actions: {
async push() {
const n = this.n;
await delay(1000);
this.numbers.push(n);
},
},
// 持久化存储
persist: true,
});
三、配置Vant及移动端适配
1. Vant 4
npm i vant @vant/nuxt -D
export default defineNuxtConfig({
// ...
modules: [
'@vant/nuxt',
],
vant: {
// ...
// 懒加载指令依赖此配置
lazyload: true,
},
})
更多配置参考官方文档：
2. Viewport 布局
以750px的尺寸做为设计稿参考值，兼容Vant 375px视口宽度，使用插件将CSS中的px单位自动转化为vw。
本来是使用postcss-px-to-viewport插件的，但是显示 postcss.plugin was deprecated，查了一下是PostCSS更新到第 8 版，插件的api还没更新过来导致报错。所以换了个插件，使用postcss-px-to-viewport-8-plugin。
npm i postcss-px-to-viewport-8-plugin -D
export default defineNuxtConfig({
// ...
postcss: {
plugins: {
'postcss-px-to-viewport-8-plugin': {
unitToConvert: 'px', // 需要转换的单位，默认为"px"
viewportWidth: (file: string) => {
// 兼容vant 375px的默认值
return file.indexOf('vant') !== -1 ? 375 : 750;
}, // 设计稿的视口宽度
unitPrecision: 5, // 单位转换后保留的精度
propList: ['*'], // 能转化为vw的属性列表
viewportUnit: 'vw', // 希望使用的视口单位
fontViewportUnit: 'vw', // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件
},
},
},
})
更多配置参考官方文档：
3. Rem 布局适配
目前没尝试过，不过找到了一篇好文推荐给大家参考
四、使用head标签与SEO优化
在html模板的标签里面定义的内容可以在此处全局设置，即所有页面默认使用该处的配置，以下这些都是常见的配置属性，其中meta属性对SEO(Search Engine Optimization)（搜索引擎优化）比较关键。
export default defineNuxtConfig({
// ...
app: {
head: {
title: 'My First Nuxt Application',
viewport: 'width=device-width,initial-scale=1,maximum-scale=1',
charset: 'utf-8',
htmlAttrs: {
lang: 'en',
},
meta: [
// 页面描述
{
name: 'description', content: 'Nuxt前端网站' },
// 关键词，页面的一个关键词
{
name: 'keywords', content: 'Nuxt' },
// 记录打包时间
{
name: 'buildDate', content: new Date().toLocaleString() },
],
},
},
})
另外为了能够更好的处理每个页面，我们可以通过 useHead 这个标签。
<script setup lang="ts">
useHead({
title: "我的博客",
meta: [
{
name: "description", content: "我的前端博客" },
{
name: "keywords", content: "Hello" },
],
});
</script>
更多head配置参考官方文档：
- https://nuxt.com/docs/api/configuration/nuxt-config#head
- https://nuxt.com/docs/api/composables/use-head
五、定义公共变量与环境变量
1. 公共变量
如果您希望在 Nuxt 3 应用程序中引用环境变量，则需要使用运行时配置（Runtime Config）。
export default defineNuxtConfig({
// ...
runtimeConfig: {
// apiSecret 只能在服务器端上访问
apiSecret: '123',
// public 命名空间中定义的，在服务器端和客户端都可以普遍访问
public: {
apiBase: process.env.NUXT_PUBLIC_API_BASE
}
}
})
使用方式：
const config = useRuntimeConfig();
const baseURL = config.public.apiBase;
2. 环境变量
使用前缀为NUXT_的匹配环境变量名来更新运行时配置值。
//.env.development
NUXT_PUBLIC_API_BASE = 'https://api-test.com'
NUXT_API_ENV = 'dev'
//.env.production
NUXT_PUBLIC_API_BASE = 'https://api.com'
NUXT_API_ENV = 'prod'
3. 运行不同环境
Nuxt CLI在开发模式下以及运行nuxi build和nuxi generate时内置了dotenv支持。
在开发模式下更新.env文件时，Nuxt实例会自动重新启动以将新值应用于process.env。
dotenv已内置，通过添加 --dotenv + .env文件的命令，能指定不同运行指令运行在不同环境下。
"scripts": {
"build": "nuxt build --dotenv .env.production",
"dev": "nuxt dev --dotenv .env.development",
"generate": "nuxt generate --dotenv .env.production",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
更多配置参考官方文档：
六、Nuxt 开发工具（Nuxt DevTools）
开启：
npx nuxi devtools enable
关闭：
npx nuxi devtools disable
配置成开发环境专属：
export default defineNuxtConfig({
// ...
devtools: {
enabled: process.env.NUXT_API_ENV === 'dev',
},
})
更多配置参考官方文档：
七、打包分析
Nuxt3 集成了Webpack 和 Vite，可以分别对应直接使用 webpack-bundle-analyzer 或 rollup-plugin-visualizer 插件进行可视化依赖包的大小分析，我采用了Vite方案。
export default defineNuxtConfig({
// ...
build: {
analyze:
// 对应需要创建‘analyzer’环境变量相关的配置
process.env.NUXT_API_ENV === 'analyzer'
? {
filename: 'stats.html', //生成分析网页文件名
title: 'Rollup Visualizer',
template: 'treemap',
// template 图表类型 (string, default treemap) - Which diagram type to use: sunburst, treemap, network, raw-data, list.
open: true, //在默认用户代理中打开生成的文件
gzipSize: true, //从源代码中收集 gzip 大小并将其显示在图表中
brotliSize: true, //从源代码中收集 brotli 大小并将其显示在图表中
}
: false,
// transpile specific dependencies with Babel
// transpile: [],
},
})
更多配置参考官方文档：
八、移除调试代码
export default defineNuxtConfig({
// ...
vite: {
esbuild: {
drop: process.env.NUXT_API_ENV !== 'dev' ? ['console', 'debugger'] : [], //移除console与debugger
},
},
})
九、开启gzip或brotli压缩
export default defineNuxtConfig({
// ...
nitro: {
compressPublicAssets: {
gzip: true,
brotli: true,
},
},
})
十、本地代理跨域
export default defineNuxtConfig({
// ...
nitro: {
// 客户端渲染时
devProxy: {
"/api": {
target: "http://localhost:3001", // 这里是接口地址
changeOrigin: true,
prependPath: true,
},
},
},
})
更多配置参考官方文档：
总结
以上就是全部内容，文章基于Nuxt3最新的3.6版本，也是我最近开发的一些实践，经历了迁移自己的Vue老项目总结归纳而成，也尝鲜过一些好玩的模块功能，学无止境还需要后续多多尝试。总体来说，熟悉了这种约定式编程，使用自动导入的 Nuxt3 开发体验还是很不错的，在调整好配置项后也能让我们放心大胆地进行后续的开发工作。
如果此篇文章对您有帮助，欢迎您【点赞】、【收藏】！也欢迎您【评论】留下宝贵意见，共同探讨一起学习~