Nuxt.js + WordPress主题部署文档

Nuxt.js - WordPress主题部署文档

主题简介:

博主轩陌开发的一款基于 WordPress + Nuxtjs 开发的前后端分离主题,支持企业微信通知功能;全站前后端分离,自适应,白日、黑夜两种主题切换,挺好看的!

主题开源地址:

github:https://github.com/D-xuanmo/Nuxtjs-Wordpress

gitee:https://gitee.com/D-xuanmo/xm-nuxtjs-wordpress

官方教程地址:https://www.xuanmo.xin/details/2987

官方教程适用于直接在shell环境下使用lnmp/lamp进行建站!

我相信大部分小伙伴都是使用宝塔进行建站的!我对照官方教程,按照我自己的理解,给大家出一个宝塔上的教程!

教程开始:

  1. 后端-安装wordpress

    新建一个站点,域名那边用127.0.0.1+任意一个端口!

    image-20221015152054212

    上传源码

    image-20221015154621008

    解压源码

    image-20221015154741828

    开始安装,点击现在就开始!

    image-20221015154832384

    输入数据库的用户名、数据库名、数据库密码,点击提交

    image-20221015155000081

    点击运行安装程序

    image-20221015155106845

    输入网站信息,点击安装wordpress

    image-20221015155316519

  2. 后端-安装主题并配置后端

    点击外观-主题

    image-20221015160355400

    点击安装主题

    image-20221015160449742

    点击上传主题

    image-20221015160522354

    选择你下好的主题文件,并点击立即安装

    image-20221015160638938

    点击启用

    image-20221015160739361

    点击主题设置

    image-20221015161220313

    配置好前端域名与其他设置,点击保存更改!

    image-20221015161750827

    返回宝塔,在网站设置里找到伪静态,选择wordpress

    image-20221015161903655

    点击保存伪静态

    image-20221015161926538

    返回wp后台点击设置-固定链接

    image-20221015162038937

    点击数字型,点击保存更改即可

    image-20221015162123987

    后端搭建完成!

  3. 前端-node环境安装

    连接SSH,用ftp工具上传node压缩包!我已经上传好了!

    tar -xvf node-v16.0.0-linux-x64.tar.xz
    #解压
    
    cd /usr/local/
    #切换到local目录
    
    mv /root/node-vxxxxxx-linux-x64 . 
    #复制文件夹到local目录,注意命令最后有一个 .
    
    mv /node-vxxxxxx-linux-x64/ nodejs
    #修改那一长串名字为nodejs
    
    vi /etc/profile
    #添加环境变量
    

    按i,然后输入以下

    export PATH=$PATH:/usr/local/nodejs/bin
    

    按esc,退出输入状态,然后输入:wq 回车

    source /etc/profile 
    #让配置生效
    
  4. 前端-全局安装yarn和pm2

    npm i -g yarn pm2
    
  5. 前端-新建站点并修改配置文件

    新建站点并选择纯静态

    image-20221015165117772

    上传前端文件到文件夹并解压

    image-20221015165349098

    修改此文件

    image-20221015165419162

    把这两个地址改成localhost:3002或者127.0.0.1:3002

    也就是我们的后端的地址!

    image-20221015165609255

    添加反向代理

    image-20221015170207875

  6. 前端-启动并验证是否可以正常访问

    返回终端,切换到前端网站目录

    cd /www/wwwroot/qian.com
    
    yarn
    #安装依赖
    yarn dev
    #启动
    

    访问前端域名,如果出现界面,代表成功,直接ctrl+c停止先!

  7. 前端-使用pm2进行进程守护

    yarn pm2
    #运行项目并开启文件更改自动重载项目
    pm2 save
    #保存当前的应用列表
    pm2 startup
    #开机自动启动
    

    完成!

    跟着教程做一遍吧,如果你在搭建过程中出现问题,我可以提供帮助!

    QQ1923469203