nuxt开发部署指南

1. vuex

1. 不要在Mutation中做异步操作，需要做异步操作用action

2. action调用通过dispatch，Mutation通过commit

3. modules可以使用命名空间

4. 严格模式下，修改state必须通过Mutation，否则无法记录更新历史，不要在生产环境下开启严格模式，会影响性能

5. vuex插件

const myPlugin = store => {
  store.subscribe((mutation, state) => {
    if (mutation.type.startsWith('cart/')) {
      window.localStorage.setItem('cart-products', JSON.stringify(state.cart.cartProducts))
    }
  })
}

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    products,
    cart
  },
  plugins: [myPlugin] // 插件
})

2. nuxt

2.1 asyncData

1. asyncData只能在页面组件中使用
2. 没有this,因为它是在组件初始化之前调用的
3. asyneData中不能通过this.$route获取数据,通过下面的方法获取

async asyncData({ query }) {}

2.2 路由

自定义路由，在nuxt.config.js中删除路由，并自定义

module.exports = {
    router: {
        linkActiveClass: 'active',
        extendRoutes(routes, resolve) {
            // 清楚 Nuxt.js 基于 pages 目录默认生成的路由表规则
            routes.splice(0)
            routes.push(...[
                {
                    path: '/',
                    component: resolve(__dirname, 'pages/layout/'),
                }
            ]
         }
    }
}

3. 部署方式

1. 最简单的部署方式
   ● 配置Host + Port
   ● 压缩发布包
   ● 把发布包传到服务端
   ● 解压
   ● 安装依赖
   ● 启动服务

pm2 start npm -- start
pm2 stop + id

image.png

2. 自动化部署

   
   image.png

ci/cd工具
Jenkins
Gitlab CI
GitHub Actions
Travis CI
Circle CI
. ..

生成github access token

生成：

image.png image.png image.png image.png

配置到项目中

image.png image.png

设置端口号，密码，用户名等

image.png

在项目根目录创建.github/workflows目录
下载main.yml到workflows目录中
https://gist.github.com/lipengzhou/b92f80142afa37aea397da47366bd872
修改配置
配置PM2配置文件
提交更新
查看自动部署状态
访问网站
提交更新..

打tag部署

git tag v1.0.1
git push origin v1.0.1