最近在使用 ThinkJS + Vue2.0 写一个简单的项目，该项目分为用户端和管理界面，分别对应 vue 的两个页面index和admin，用户端、管理界面自身是基于 vue 构建的单页应用，服务端采用 thinkjs 的提供 api。
项目目录结构如下：
.
├── README.md
├── client
│ ├── README.md
│ ├── build
│ ├── config
│ ├── package.json
│ ├── src
│ │ ├── components
│ │ ├── modules
│ │ └── pages
│ │ ├── admin
│ │ └── index
│ └── static
└── server
├── src
│ ├── bootstrap
│ ├── config
│ ├── controller
│ │ ├── admin
│ │ ├── base.js
│ │ ├── home
│ │ └── index.js
│ ├── logic
│ └── model
├── view
│ ├── admin.html
│ └── index.html
└── www
└── static
client 的配置
直接使用 vue 官方的 vue-cli 创建项目，选择使用 webpack 构建。
修改config/index.js，给 webpack-dev-server 添加 proxyTable:
proxyTable: {
'/api' : {
target: 'http://localhost:8360/api/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
然后参照《使用 Vue-cli 搭建多页面应用时对项目结构和配置的调整》的方法将其改为多页应用，具体方法为：
调整项目目录，创建src/pages/index，将src/assets、src/router、src/App.vue、src/main.js和./index.html移动到该目录中，并将main.js改名为index.js。
修改构建脚本build/utils.js，添加：
var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
var merge = require('webpack-merge')
exports.entries = function() {
var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
var map = {}
entryFiles.forEach((filePath) => {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
map[filename] = filePath
})
return map
}
exports.htmlPlugin = function() {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
return entryHtml.map((filePath) => {
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
let conf = {
template: filePath,
filename: filename + '.html',
chunks: ['manifest', 'vendor', filename],
inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf, {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
return new HtmlWebpackPlugin(conf)
})
}
修改build/webpack.base.conf.js的入口配置：
module.exports = {
context: path.resolve(__dirname, '../'),
entry: utils.entries(),
...
...
}
修改build/webpack.dev.conf.js和build/webpack.prod.conf.js的插件配置：
plugins: [
...
...utils.htmlPlugin(),
...
]
创建 src/pages/admin 目录，添加admin.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta >
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Admin</h1>
</body>
</html>
创建 src/pages/404 目录，添加404.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta >
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>404</title>
</head>
<body>
<h1>404 Not Found</h1>
</body>
</html>
修改 webpack-dev-server 的路由表：
historyApiFallback: {
rewrites: [
{ from: /^\/$/, to: '/index.html' },
{ from: /^\/admin\/?$/, to: '/admin.html' },
{ from: /./, to: '/404.html' }
],
},
至此 client 端的配置就完成了，可以通过 npm start 启动 client 端，通过 http://localhost:8080 访问页面。
server 的配置
直接使用 ThinkJS 官方的 think-cli 创建项目，修改src/config/router.js，添加路由：
module.exports = [
[/^\/api\/(.*)/i, '/:1'],
[/^\/$/i, '/'],
[/^\/admin\/?$/i, '/index/admin'],
[/\//, 'index/_404', 'get']
];
修改src/controller/index.js渲染模板：
const Base = require('./base.js');
module.exports = class extends Base {
indexAction() {
return this.display('index.html');
}
adminAction() {
return this.display('admin.html');
}
_404Action() {
return this.display('404.html');
}
};
至此服务器的配置完成，启动 server 端，client 可通过 http://localhost:8080/api 访问 API。
开发服务端 API
在 server 中任意 controller 暴露的 API 可以通过 /api/controller/action 来访问，比如：
const Base = require('./base.js');
module.exports = class extends Base {
indexAction() {
return this.success('test');
}
};
可以通过 http://localhost:8080/api/test 访问：
{
errno: 0,
errmsg: "",
data: "test"
}
添加新页面 abc
在 client 的 src/pages 目录下创建新的页面 src/pages/abc/abc.html，同时修改 webpack.dev.config.js，historyApiFallback 中添加新的页面路由。
historyApiFallback: {
rewrites: [
{ from: /^\/$/, to: '/index.html' },
{ from: /^\/admin\/?$/, to: '/admin.html' },
{ from: /^\/abc\/?$/, to: '/abc.html' },
{ from: /./, to: '/404.html' }
],
},
在 server 的 src/controller/index.js 中创建新的 action
const Base = require('./base.js');
module.exports = class extends Base {
...
abcAction() {
return this.display('abc.html');
}
_404Action() {
return this.display('404.html');
}
};
修改 router.js 添加新路由：
module.exports = [
[/^\/api\/(.*)/i, '/:1'],
[/^\/$/i, '/'],
[/^\/admin\/?$/i, '/index/admin'],
[/^\/abc\/?$/i, '/index/abc'],
[/\//, 'index/_404', 'get']
];
分别重启 sever、client 即可。
生产环境构建
生产环境构建非常简单，直接在 client 下运行npm run build，将dist下生成的文件*.html拷贝到 server 的view目录下，将dist/static目录拷贝到 server 的www目录下，然后将 server 部署到生产环境运行即可。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！