使用 Vue CLI 4 初始化项目

[409915016]

原项目是基于古老的 Vue CLI 建成的，使用的仍是 webpack 2，构建依赖等问题，项目在构件时出现报错，详细见 #5 。

新版的 Vue CLI 拥有更多的功能，解决了以前没办法实现的问题，与其在原构建方案中修复问题，不如拥抱新构建版本。

现在重新使用 Vue CLI 4 初始化模板，将源代码迁移到模板里，并构建出多页面应用。

[409915016]

原有的应用入口文件存放在 src/entries 目录中

src
├─entries
│      admin-main.js
│      init.js
│      main.js

入口文件	调整后的新入口文件	地址	描述
admin-main.js	admin/app.js	http://localhost:8080/admin	管理后台应用
init.js	init/app.js	http://localhost:8080/init	初始化向导应用
main.js	filmy/app.js	http://localhost:8080/filmy	项目前端应用

修改后的入口文件

src
├─pages
│  ├─admin
│  │      app.js
│  │
│  ├─filmy
│  │      app.js
│  │
│  └─init
│          app.js

在新的 Vue CLI 4 创建的项目，配置文件 vue.config.js 通过 page 参数导入多个页面对象，即可构建出多页面应用：

const pageSet = (name, title = "") => {
    return {
        [`${name}`] : {
            entry: `src/pages/${name}/app.js`,
            template: `public/${name}.html`,
            filename: `${name}.html`,
            title: title ? title: name
        }
    }
}

const pages = {
    ...pageSet('init'),
    ...pageSet('admin'),
    ...pageSet('filmy'),
}

module.exports = {
    //...
    pages
}

那么在开发项目时，通过下面的地址访问相关页面

http://localhost:8080/init
http://localhost:8080/admin
http://localhost:8080/filmy