简单构建 ThinkJS + Vue2.0 前后端分离的多页应用

简单构建 ThinkJS + Vue2.0 前后端分离的多页应用

本文来自奇舞团月影大大的投稿。转自奇舞周刊，转载需注明出处。

创建 src/pages/404 目录，添加404.html文件：

修改webpack-dev-server的路由表：

至此client端的配置就完成了，可以通过 npm start 启动client端，通过 http://localhost:8080 访问页面。

server 的配置

直接使用ThinkJS官方的think-cli创建项目，修改src/config/router.js，添加路由：

可以通过 http://localhost:8080/api/test 访问：

添加新页面 abc

在 client 的 src/pages 目录下创建新的页面 src/pages/abc/abc.html，同时修改 webpack.dev.config.js，historyApiFallback 中添加新的页面路由。

在 server 的 src/controller/index.js 中创建新的 action

修改 router.js 添加新路由：

分别重启sever、client即可。

生产环境构建

生产环境构建非常简单，直接在client下运行npm run build，将dist下生成的文件*.html拷贝到server的view目录下，将dist/static目录拷贝到server的www目录下，然后将server部署到生产环境运行即可。