Vue进阶之 Nuxt.js 基础

Vue进阶之 Nuxt.js 基础

Nuxt.js 介绍

• 官网: https://www.nuxtjs.cn/guide
• GitHub 仓库: https://github.com/nuxt/nuxt.js

1、案例学习，推荐realworld https://github.com/gothinkster/realworld
可以使用你要学习的技术，来实现这个案例，前后端都可以。

2、免费的 npm 包国内地址，可以下载一些包儿 。
https://www.jsdelivr.com/

关于nuxt.js的登录态的问题

官网也有现成的解决方案
跨域身份验证 (JWT) https://www.nuxtjs.cn/examples/auth-external-jwt
客户端

// 浏览器端代码
const Cookie = process.client ? require('js-cookie') : undefined

export default {
  middleware: 'notAuthenticated',
  methods: {
    postLogin () {
      setTimeout(() => { // we simulate the async request with timeout.
        const auth = {
          accessToken: 'someStringGotFromApiServiceWithAjax'
        }
        this.$store.commit('setAuth', auth) // mutating to store for client rendering
        // 将token存入cookie
        Cookie.set('auth', auth) // saving token in cookie for server rendering
        this.$router.push('/')
      }, 1000)
    }
  }
}

服务端

// node中服务端方法，获取请求头中的token
const cookieparser = process.server ? require('cookieparser') : undefined
...

actions: {
  nuxtServerInit ({ commit }, { req }) {
  	//此方法只会在server端执行，是一个特殊的action方法
  	//作用：初始化容器数据，传递数据给客户端使用
	let user = null
	if (req.headers.cookie) {
	// 将请求头中的 Cookie 字符串解析为一个对象
		const parsed = cookieparser.parse(req.headers.cookie) try {
		// 将 user 还原为 JavaScript 对象
		user = JSON.parse(parsed.user) } catch (err) {
	        // No valid cookie found
		} 
	}
	commit('setUser', user)
  }
}

服务器部署

服务器node安装

yum install -y nodejs

上传文件

 scp ./real.zip root@ip:/root/workspace/realworld/

1、上传文件后正常解压文件，然后install安装包，启动；

1、unzip real.zip
2、npm install
3、npm run start

使用pm2管理程序

1、npm install pm2 -g
2、pm2 start npm -- start //启动npm --start是给npm传参

常用命令

pm2 list  //査看应用列表  
pm2 start //启动应用  
pm2 stop  //停止应用  
pm2 reload //重载应用  
pm2 restart //重启应用  
pm2 delete  //除应用

自动化部署

github案例 利用github的action
1、在github设置 “Personal access tokens” 个人访问令牌
2、在项目中添加令牌
3、配置 Github Actions 执行脚本

• 在项目根目录创建.github/ workflows 目录
• 下载 main.yml 到 workflows 目录中
• 修改配置
• 配置 PM2 配置文件

{
  "apps":[
    {
      "name":"RealWorld",
      "script": "npm",
      "args": "start"
    }
  ]
}

• 提交更新
• 看自动部署状态
• 访问网站
• 提交更新。
  最后，git打tag提交

git tag v1.0.0
git push origin v1.0.0

yml文件配置

name: Publish And Deploy Demo
on:
  push:
    tags:
      - 'v*'

jobs:
  build-and-deploy: #运行环境
    runs-on: ubuntu-latest
    steps:

    # 下载源码
    - name: Checkout
      uses: actions/checkout@master

    # 打包构建
    - name: Build
      uses: actions/setup-node@master
    - run: npm install
    - run: npm run build
    # 压缩包儿
    - run: tar -zcvf release.tgz .nuxt src/static src/router.js nuxt.config.js package.json package-lock.json pm2.config.json 

    # 发布 Release
    - name: Create Release
      id: create_release
      uses: actions/create-release@master  #创建release分之
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        tag_name: ${{ github.ref }}
        release_name: Release ${{ github.ref }}
        draft: false  #不是草稿
        prerelease: false  #不是release版，是正式版

    # 上传构建结果到 Release
    - name: Upload Release Asset
      id: upload-release-asset
      uses: actions/upload-release-asset@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        upload_url: ${{ steps.create_release.outputs.upload_url }}
        asset_path: ./release.tgz
        asset_name: release.tgz
        asset_content_type: application/x-tgz

    # 部署到服务器
    - name: Deploy
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        port: ${{ secrets.PORT }}
        script: |
          cd /root/workspace/realworld
          wget https://github.com/UMbalrog/realworld_nuxt/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json

        # 重启服务

记录，部署后nginx转发 https://blog.csdn.net/weixin_38312502/article/details/101780412