开始前,确定你电脑全局安装了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