手把手教你 vue-cli 单页到多页应用

作者：吃葡萄不吐番茄皮

segmentfault.com/a/1190000015113584

前言

我有一个cli创建的vue项目，但是我想做成多页应用，怎么办，废话不多说，直接开撸~

约定：新增代码部分在//add和//end中间 删除(注释)代码部分在//del和//end中间，很多东西都写在注释里

第一步：cli一个vue项目

新建一个vue项目，官网：

vue init webpack demo

cli默认使用webpack的dev-server服务，这个服务是做不了单页的，需要手动建一个私服叫啥你随意 一般叫dev.server或者dev.client。

第二步：添加两个方法处理出口入口文件（SPA默认写死的）

进入刚刚创建vue项目：

在目录下面找到 ·build/utils.js· 文件，修改部分：

第三步：创建私服（不使用dev-server服务，自己建一个）

私服创建好了，安装下依赖。有坑。。。

webpack和热加载版本太高太低都不行

第四步：修改配置

test环境一样

第五步：修改package.json 指令配置

scripts下面，这样执行的时候就不会走默认的dev-server而走你的私服了。

第六步：创建测试文件

src目录下新建views文件夹（代码注释里有，当时配的目录跟这个一致就可以，随便你命名，遵循命名规范就行），views文件夹下新建两个文件夹index和home，代表多页，每页单独一个文件夹，文件夹下建对应文件。

最后，

这个时候你会发现，特么的什么鬼文章，报错了啊。稍安勿躁~两个地方：

这个assetsRoot cli创建的时候是没有的 在config/index.js 下面找到dev加上

2、还是版本问题

默认是3.1.3版本但是会报错，具体哪个版本不报错我也不知道。

找不到invalid，源码里面是有的。卸载webpack-dev-middleware：

使用dev-server自带的webpack-dev-middleware（cli单页应用是有热加载的），重新install dev-server：

总结

核心点就在创建并配置私服和修改出口入口配置，坑就在版本不兼容。建议：cli一个vue的demo项目，从头撸一遍，再在实际项目里使用，而不是copy一下运行没问题搞定~

建议而已，你怎么打人，呜呜呜~

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能