搭建基于vue的多入口项目

开始前，确定你电脑全局安装了vue的脚手架工具vue-cli。

在你想建立项目的文件路径下运行cmd，输入‘vue init webpack multiple’初始化webpack模板的vue项目。

初始化项目过程中，你可以自己选择是否安装vue-router、eslint等工具。

不知什么原因，npm install过程报错，打开项目目录，在该目录下的cmd中执行‘npm cache clean --force’后再次执行‘npm install’后成功安装项目依赖的插件。

执行‘npm run dev’后项目成功启动！

接下来便开始进行项目多入口的改造。

打开webpack.base.conf.js文件，发现其默认入口为src文件夹下的main.js。

我们首先需要对入口文件及其设置做相应修改。

在src文件夹下新建pages文件夹，然后在pages文件夹下新建index和admin两个文件夹，然后将最外层的index.html和src下的main.js、App.vue、router文件夹移到index文件夹下，然后复制一份到admin文件夹中。

为了便于区分两个页面入口文件，我们需要将admin文件夹下的index.html改名成admin.html，App.vue改名Admin.vue（删除或更改其中的img标签的src路径，Admin.vue中的img标签也做同样处理），且不要忘了把这两文件中id为app的div改名为admin。

接着对admin文件夹下的main.js文件做一些改造（index文件夹下的main.js中 router的导入也需要修改下路径），如下所示：

到此，新的入口文件已经建立好，剩余需求及项目配置可在pages文件夹下的index和admin 文件夹下按照普通单入口文件做相应处理。后期可尽量把公共模块抽离出来各自引入到子入口的相关代码中。

接下来，修改配置让项目能够正常运行。

首先，改造webpack.base.conf.js文件中的入口，修改如下：

打开webpack.dev.conf.js文件，修改配置如下：

打开webpack.prod.conf.js文件夹，修改如下：

执行npm run dev发现项目已成功启动！

index文件夹下的门户页访问路径：http://localhost:8081/index.html#/

admin文件夹下的后台管理页访问路径：http://localhost:8081/admin.html#/

运行‘npm run build’命令，查看并运行静态资源服务，发现打包的文件一切正常，支持多入口项目搭建的雏形完满完成。

最后附上该demo的github地址：https://github.com/nimdean/vue-multiple.git