Nuxt重构填坑
发布网友
发布时间：2024-10-24 13:23
共1个回答
热心网友
时间：2024-10-29 15:02
在个人网站改造中，我从VueCLI转至Nuxt，以解决SEO问题并重构代码。过程中遇到的坑点和解决方案如下：
一、body样式不生效需在nuxt.config.js中配置bodyAttrs的class属性，并设置CSS文件路径。
二、store使用差异：在声明和调用时，store需通过函数形式。
三、Nuxt打包分为静态资源和SSR形式。静态资源打包通过执行npm run generate，配置nuxt.config.js。
四、Nuxt的Vuex管理状态需在store文件夹下进行，且在plugins文件夹引入vuex.js。
五、引入iconfont，只需将资源文件放入assets文件夹，并在nuxt.config.js的css属性中写入路径。
六、引入axios报错原因：Vue-server-renderer需使用CommonJS规范组件，而axios使用ES6规范，需降低axios版本或确保组件符合规范。
七、Nuxt配置本地代理需要创建middleware文件夹和proxy.js文件，确保pathRewrite和pathRequiresRewrite配置正确。
八、Nuxt2使用echarts5需要解决ES模块语法与CommonJS模块系统的不兼容问题，通过nuxt.config.js设置解决。
九、Nuxt对SEO优化有限，打包静态页面效果不佳，SSR模式会更好，但需注意生成静态文件时仅包含首页DOM结构。
十、Nuxt部署至Nginx涉及SSR和静态页面模式。SSR模式下，除.nuxt目录外，还需上传其他文件至nuxt.config.js同级路径，并配置代理。静态页面模式下，只需上传dist文件夹。
十一、Nuxt启动服务可使用forever获得持久服务，更新代码后需重启服务，先干掉之前的进程，使用命令杀死PID，确保服务稳定。
十二、Nuxt原生不支持SVG格式，需额外安装转换器。
热心网友
时间：2024-10-29 14:59
在个人网站改造中，我从VueCLI转至Nuxt，以解决SEO问题并重构代码。过程中遇到的坑点和解决方案如下：
一、body样式不生效需在nuxt.config.js中配置bodyAttrs的class属性，并设置CSS文件路径。
二、store使用差异：在声明和调用时，store需通过函数形式。
三、Nuxt打包分为静态资源和SSR形式。静态资源打包通过执行npm run generate，配置nuxt.config.js。
四、Nuxt的Vuex管理状态需在store文件夹下进行，且在plugins文件夹引入vuex.js。
五、引入iconfont，只需将资源文件放入assets文件夹，并在nuxt.config.js的css属性中写入路径。
六、引入axios报错原因：Vue-server-renderer需使用CommonJS规范组件，而axios使用ES6规范，需降低axios版本或确保组件符合规范。
七、Nuxt配置本地代理需要创建middleware文件夹和proxy.js文件，确保pathRewrite和pathRequiresRewrite配置正确。
八、Nuxt2使用echarts5需要解决ES模块语法与CommonJS模块系统的不兼容问题，通过nuxt.config.js设置解决。
九、Nuxt对SEO优化有限，打包静态页面效果不佳，SSR模式会更好，但需注意生成静态文件时仅包含首页DOM结构。
十、Nuxt部署至Nginx涉及SSR和静态页面模式。SSR模式下，除.nuxt目录外，还需上传其他文件至nuxt.config.js同级路径，并配置代理。静态页面模式下，只需上传dist文件夹。
十一、Nuxt启动服务可使用forever获得持久服务，更新代码后需重启服务，先干掉之前的进程，使用命令杀死PID，确保服务稳定。
十二、Nuxt原生不支持SVG格式，需额外安装转换器。
