简单构建 ThinkJS + Vue2.0 前后端分离的多页应用
发布网友
发布时间：2024-10-03 16:20
共1个回答
热心网友
时间：2024-10-27 04:55
项目架构设计
基于Vue-cli创建项目，选择webpack构建，配置config/index.js，添加webpack-dev-server的proxyTable。
调整项目目录结构，将src/assets、src/router、src/App.vue、src/main.js和index.html移至src/pages/index，将main.js改名index.js，使其转变为多页应用。
修改构建脚本build/utils.js，构建build/webpack.base.conf.js、build/webpack.dev.conf.js和build/webpack.prod.conf.js，完成多页应用的配置。
创建src/pages/admin和src/pages/404目录，添加admin.html和404.html文件，修改webpack-dev-server的路由表，启动client端，访问页面。
服务端配置
使用ThinkJS官方的think-cli创建项目，修改src/config/router.js添加路由。
在src/controller/index.js中，根据路由渲染对应模板。
启动服务器，通过http://localhost:8080/api访问API。
开发服务端API
任意控制器暴露的API通过/api/controller/action访问，例如：http://localhost:8080/api/test
添加新页面
在client的src/pages下创建新页面src/pages/abc/abc.html，修改webpack.dev.config.js，添加新页面路由到historyApiFallback。
在server的src/controller/index.js中创建新action，并修改router.js添加新路由。
重启server、client完成新页面添加。
生产环境构建
在client下运行npm run build，将生成的dist文件夹中的*.html拷贝至server的view目录，将dist/static目录拷贝至server的www目录，部署至生产环境运行。
