Nuxt.js

139 阅读1分钟

blog.csdn.net/snowball_li…

目录结构

├── .nuxt/                # 自动生成的文件,包含编译后的代码和配置
├── assets/               # 用于存放未编译的静态资源,如CSS、图片、字体
├── components/           # 自定义Vue组件
├── layouts/              # 应用的布局文件,定义页面的通用结构
│   └── default.vue       # 默认布局
├── middleware/           # 中间件文件
├── pages/                # 应用的路由和视图,每个文件对应一个路由
│   ├── index.vue         # 默认首页
│   └── [slug].vue        # 动态路由示例
├── plugins/              # 自定义Vue.js插件
├── static/               # 静态资源,会被原样复制到输出目录
├── store/                # Vuex状态管理文件
│   ├── actions.js        # Vuex actions
│   ├── mutations.js      # Vuex mutations
│   ├── getters.js        # Vuex getters
│   └── index.js          # Vuex store入口文件
├── nuxt.config.js        # Nuxt.js配置文件
├── package.json          # 项目依赖和脚本
└── yarn.lock             # 或者npm.lock,记录依赖版本

修改版本号

// 执行npm list命令,查看版本号

package.json文件中修改:

"dependencies":{
  "vue":"latest" ----> "vue":"查找对应的版本号"
   "vue-router":"latest" ----> "vue-router":"查找对应的版本号"
}

nuxt3项目修改端口号

nuxt默认端口号是3000 修改开发环境端口号:

// package.json
"scripts":{
  "dev":"nuxt dev --port 3001"
}

服务器部署

image.png

build:混合渲染模式,node启动项目,nginx做代理转发

node

node ./.output/server/index/mjs