nuxt.js项目和纯vue项目对比

Nuxt.js 和纯Vue项目对比

build 后目标产物不同

vue: dist

nuxt: .nuxt

路由

nuxt按照 pages 文件夹的目录结构自动生成路由
vue需在 src/router/index.js 手动配置路由

入口

nuxt页面入口为 layouts/default.vue
vue页面入口为 src/App.vue

webpack配置

nuxt内置webpack,允许根据服务端需求,在 nuxt.config.js 中的build属性自定义构建webpack的配置,覆盖默认配置
vue关于webpack的配置存放在build文件夹下

网页渲染流程

vue: 客户端渲染,先下载js后,通过ajax来渲染页面。

nuxt: 服务端渲染,可以做到服务端拼接好html后直接返回,首屏可以做到无需发起ajax请求;

部署流程

vue: 只需部署dist目录到服务器,没有服务端,需要用nginx等做Web服务器;

nuxt: 需要部署几乎所有文件到服务器(除node_modules,.git),自带服务端,需要pm2管理(部署时需要reload pm2),若要求用域名,则需要nginx做代理。

项目入口

vue: /src/main.js,在main.js可以做一些全局注册的初始化工作;
nuxt: 没有main.js入口文件,项目初始化的操作需要通过nuxt.config.js进行配置指定。

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×