手把手教你 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一下运行没问题搞定~

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

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180603B1CXIO00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券