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

vue-cli到多页应用

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

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

第一步:cli一个vue项目

新建一个vue项目 官网 vue init webpack demo
cli默认使用webpack的dev-server服务,这个服务是做不了单页的,需要手动建一个私服叫啥你随意 一般叫dev.server或者dev.client

第二步:添加两个方法处理出口入口文件(SPA默认写死的)

进入刚刚创建vue项目 cd demo
在目录下面找到build/utils.js文件
修改部分:

  • utils.js

第三步:创建私服(不使用dev-server服务,自己建一个)

从express新建私服并配置(build文件夹下新建 我这里叫webpack.dev.client.js)

  • webpack.dev.client.js

私服创建好了 安装下依赖
有坑。。。
webpack和热加载版本太高太低都不行
npm install webpack@3.10.0 –save-dev
npm install webpack-dev-middleware –save-dev
npm install webpack-hot-middleware@2.21.0 –save-dev
npm install http-proxy-middleware –save-dev

第四步:修改配置

  • webpack.base.conf.js

  • webpack.dev.conf.js

  • webpack.prod.conf.js

plugins最后加上.concat(utils.createHtmlWebpackPlugin([‘manifest’, ‘vendor’]))
test环境一样

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

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

第六步:创建测试文件

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

打包改为相对路径config/index.js
build下面

3073784422-5b0f614823a7c_articlex

最后,npm run dev 或者 npm run build

测试环境自己配 跟 生产环境差不多,就几个配置参数不一样

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

  • 1.webpack.dev.client.js

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

4198209571-5b0f69a5de0e6_articlex

  • 2.还是版本问题

webpack-dev-middleware 默认是3.1.3版本但是会报错
具体哪个版本不报错我也不知道

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

使用dev-server自带的webpack-dev-middleware (cli单页应用是有热加载的)
重新install dev-server

1510784734-5b0f6b3d09383_articlex 1950268177-5b0f6b5628e02_articlex

总结:核心点就在创建并配置私服和修改出口入口配置,坑就在版本不兼容

建议:cli一个vue的demo项目 从头撸一遍 再在实际项目里使用,而不是copy一下运行没问题搞定~
建议而已,你怎么打人,呜呜呜~

快过节了,觉得本文对你有用的话请随意打赏,让作者可以买个棒棒糖吃~

——————————————-6.1更—————————————–
留了一个坑,一天了,有赞有收藏,没见人评论指出坑,心痛的无法呼吸~

build 后 没有引入共用模块

代码已更新~ build后可正常访问…

注:内容有不当或者错误处请指正~转载请注明出处~谢谢合作!

1 3 收藏 1 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部