Nuxt配置

最新推荐文章于 2024-08-03 10:56:18 发布

不想上班的前端小白

最新推荐文章于 2024-08-03 10:56:18 发布

阅读量1.6k

点赞数 33

文章标签：前端

本文链接：https://blog.csdn.net/weixin_50330731/article/details/140715907

版权

入门总是要从配置入手的，vite有他的vite.config.ts eslint也有属于它的eslint.config.js
而Nuxt也有它的nuxt.config.ts 由于过多不好展示，我用我的粗浅认知挑几个我觉得应该重要点的来讲，具体在这https://nuxtjs.org.cn/docs/api/nuxt-config#builder

1.别名

可以通过定义额外的别名来访问 JavaScript 和 CSS 中的自定义目录，从而提高您的开发体验。

类型：对象

{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "assets": "/<srcDir>/assets",
  "public": "/<srcDir>/public"
}

以上代码是官网弄下来的列子，由于我也是第一次学习也许后面会回来加入我创作的别名

这里得注意一点在webpack里必须要在别名前加入~（webpack作为开国功臣还是要尊重一下的

2.analyzeDir

这是Nuxt运行 nuxt analyze时存储生成文件的目录文档说如果指定了相对路径就相对于rootDir

3.app

3.1 baseURL-Nuxt应用配置

NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs

这个感觉就跟基础的vue差不多了可以在这个url设置的时候进行更改

3.2 buildAssetsDir -构建的站点资产的文件夹名称

相对于 baseURL（如果设置了 cdnURL，则相对于 cdnURL）。这在构建时设置，不应在运行时自定义。

3.3 cdbURL --用于提供公关文件夹的绝对URL

根据文档定义是用于生产环境的

由于现阶段还未接触实际的生产环境，停留在业务层（很渴望能接触更深的东西，但是这些东西都已经被公司的大佬们搞定了以及，需要熬啊希望有大佬能推荐一下学习路线给我，不然只能等日后什么时候接触到一点再去学了😂

3.4 head -每个页面的head配置

这个显而易见设置默认配置的

{
  "meta": [
    {
      "name": "viewport",
      "content": "width=device-width, initial-scale=1"
    },
    {
      "charset": "utf-8"
    }
  ],
  "link": [{rel:'xxxxx',href:'xxxx'}],
  "style": [{可以用标准css规范也可引入}],
  "script": [],
  "noscript": []
}