具体项目内容和依赖包安装就不叙述了,讲几个自己遇到的问题。
项目在development时可以运行,但是打包后得到的html文件打开后出现错误。
1.vue-router在开发和生产时的配置变更,在开发时一般会采用history模式,打包后若不依赖服务端,直接打开html文件会出现问题,最简单的方法直接去掉模式设置或者改为hash模式。也可以保留history模式,需要在config中设置config.devServer.historyApiFallback: true(该方法没试过)
2.打包后chunk的路径问题,问题在webpack.prod.config.js中设置publicPath为绝对路径,之后bundle.js在内部会按照绝对路径查找chunk,实际上二者打包在同一目录下,所以用相对路径可以解决该问题。可能也有方法将其配置成完整路径,但本人不太了解。
3.HtmlwebpackPlugin路径,注意使用相对路径
4.最后打包得到的文件可以部署到node环境中,用express.static静态托管
5.此外还有一些是插件版本带来的问题,如extract-text-webpack-plugin,在新版本的webpack中应该采用npm install extract-text-webpack-plugin@next --save-dev安装测试版。
还有vue-loader v15版本和webpack@4+版本使用时,相对于vue-loader v14,写法有变动,https://vue-loader.vuejs.org/guide/#manual-setup
6.在vue-router使用history模式时,需要在配置文件中的webpack-dev-server添加 --history-api-fallback
7.使用vue-router时,设置模版的样式时css需要用绝对路径导入,否则之后路径中出现 ‘/’时会以相对路径计算,路径会发生错误