手把手教你vue-cli单页到多页应用的方法(5)

webpack.prod.conf.js

plugins最后加上.concat(utils.createHtmlWebpackPlugin())

test环境一样

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

scripts下面'dev':

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

"scripts": {
  "dev": "node build/webpack.dev.client.js",
  "start": "npm run dev",
  "build": "node build/build.js"
 },

第六步：创建测试文件

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

最后，npm run dev

这个时候你会发现，特么的什么鬼文章 报错了啊

稍安勿躁~

两个地方，

1.webpack.dev.client.js

//双路由  私服一层控制私服路由  vue的路由控制该页面下的路由
app.use(router)
app.use('/static', express.static(path.join(assetsRoot, 'static')));

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

assetsRoot: path.resolve(__dirname, '../dist'),

顺便把dev和build的assetsPublicPath 路径都改成相对路径'./'

2.还是版本问题

webpack-dev-middleware 默认是3.1.3版本但是会报错

具体哪个版本不报错我也不知道

context.compiler.hooks.invalid.tap('WebpackDevMiddleware', invalid);

找不到invalid 源码里面是有的

卸载webpack-dev-middleware

npm uninstall webpack-dev-middleware

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

重新install dev-server

npm install webpack-dev-server@2.10.0 --save-dev

npm run dev

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