能否在无模板的WordPress上部署纯VueJs客户端网站？求教程或替代方案

一、可行性：完全可以无模板部署 #

不用依赖WordPress主题模板，核心思路是把Vue项目作为独立静态资源嵌入WordPress，或者将WordPress作为Headless CMS，用Vue接管前端渲染，主要有两种落地方式：

方式1：直接嵌入静态打包文件 #

• 本地打包Vue项目：执行npm run build生成dist文件夹，里面包含静态HTML、CSS、JS及资源文件
• 上传静态文件：通过FTP或WordPress文件管理工具，把dist内的文件上传到wp-content/uploads下的自定义目录（比如vue-app）
• 配置路径：修改Vue项目的vue.config.js，设置publicPath: '/wp-content/uploads/vue-app/'，确保资源加载路径正确
• 接入WordPress：新建空白页面，用自定义HTML区块引入打包后的JS和CSS，或者创建自定义PHP页面模板加载这些资源

方式2：Vue SPA对接WordPress REST API #

把WordPress当后端内容仓库，Vue完全负责前端展示：

• Vue项目通过WordPress默认的REST API（路径/wp-json/wp/v2/）拉取文章、分类、菜单等内容
• 打包Vue项目后部署到WordPress服务器目录，用WordPress页面作为SPA入口
• 配合WordPress的固定链接设置，开启Vue的history路由模式，实现友好URL

二、实操教程（直接上手，无第三方外链） #

无需找外部教程，按以下步骤即可完成：

1. Vue项目配置
   在vue.config.js中添加：

   module.exports = {
     publicPath: '/wp-content/uploads/vue-app/' // 对应你上传的目录路径
   }
   

   执行npm run build得到静态包

2. WordPress端部署

   • 在主题目录新建page-vue-spa.php，写入自定义模板代码：

     <?php
     /*
     Template Name: Vue SPA 入口页
     */
     get_header(); ?>
     <div id="app"></div>
     <script src="/wp-content/uploads/vue-app/js/app.xxxx.js"></script> <!-- 替换为实际文件名 -->
     <link rel="stylesheet" href="/wp-content/uploads/vue-app/css/app.xxxx.css"> <!-- 替换为实际文件名 -->
     <?php get_footer(); ?>
     

   • 在WordPress后台新建页面，选择这个自定义模板并发布，访问页面即可看到Vue项目

3. REST API对接
   在Vue组件中用axios请求内容示例：

   import axios from 'axios'
   
   export default {
     data() {
       return {
         posts: []
       }
     },
     mounted() {
       axios.get('/wp-json/wp/v2/posts')
         .then(res => {
           this.posts = res.data
         })
     }
   }
   

   自定义字段可通过Advanced Custom Fields插件的REST API扩展实现对接

三、非最优场景的替代方案 #

如果觉得嵌入WordPress冗余，或需要更灵活的架构，推荐以下方案：

• Headless WordPress + Vue静态部署：Vue项目部署到静态托管平台，完全独立于WordPress服务器，仅通过REST API拉取内容，前后端分离更彻底，性能和维护性更好
• WordPress内嵌Vue组件：使用@wordpress/scripts工具链，在WordPress主题或插件中开发Vue组件，适合需要和WordPress原生功能（比如评论、用户系统）深度整合的场景
• Nuxt.js对接WordPress：Nuxt.js作为Vue的SSR框架，能解决纯SPA的SEO问题，可部署为静态站点或SSR站点，更适合内容型网站的需求

内容的提问来源于stack exchange，提问作者99Botch