发现了问题。看到vue-cli3和framework7都升级到3.0了，团队打算用新版本来做点新东西。有https://github.com/framework7...和添加vue-cli3中文文档。很顺利，npmrunserve也可以运行项目了。但是npmrunbuild打包的时候出现了问题。报错如下：ERRORError:CSSminificationerror:Parseerroronline1:8px+constant(safe-area-i------^Expecting'SUB','LPAREN','NESTED_CALC','NUMBER','CSS_VAR','长度','角度','时间','频率','RES','EMS','EXS','CHS','REMS','VHS','VWS','VMINS'、'VMAXS'、'PERCENTAGE'、得到'PREFIX'。文件：chunk-vendors.842c282c.cssError：CSS缩小错误：第1行的解析错误：8px+常量（safe-area-i------^期待'SUB'、'LPAREN'、'NESTED_CALC'、'NUMBER'、'CSS_VAR'、'LENGTH'、'ANGLE'、'TIME'、'FREQ'、'RES'、'EMS'、'EXS','CHS','REMS','VHS','VWS','VMINS','VMAXS','PERCENTAGE'得到'PREFIX'。文件：D:\work\中的chunk-vendors.842c282c.cssmobile3\node_modules\@intervolga\optimize-cssnano-plugin\index.js:106:21npmERR!codeELIFECYCLEnpmERR!errno1npmERR!mobile3@0.1.0构建：`vue-cli-service构建`npm错误！退出状态1npmERR!npmERR!在mobile3@0.1.0构建script.npm错误时失败！这可能不是npm的问题。上面的日志输出.npmERR！可以在以下位置找到此运行的完整日志：npmERR！C:\Users\zz\AppData\Roaming\npm-cache\_logs\2018-08-16T05_07_51_763Z-debug.log先分析问题观察这是一个CSSminification错误，说是calc函数没有收到正确的值.然后用报错信息8px+constant(safe-area-i去搜索f7的css文件，发现很多这样的代码：padding-left:calc(8px+constant(safe-area-inset-right));padding-left:calc(8px+env(safe-area-inset-right));然后搜索safe-area-inset-right，发现这是一部iPhoneX（有文章：http://www.css88.com/archives...)属性用于解决iPhoneX额头凹槽导致的问题。然后以constant为关键词搜索vue-cli3issue。https://github.com/vuejs/vue-...游达说是cssnano的问题https://github.com/framework7...framework7的作者说这是ios必备的，不是我的错，请用cssnano提issue。https://github.com/cssnano/cs...cssnano说safe-area-inset-right属性是非标准的，是AppleiPhonex专有的，并且也不是我的错，你可以看看reduce-css-calchttps://github.com/MoOx/reduc...reduce-css-calc说是知道了，但是并没有解决。综上所述，f7使用了专用的iPhonexcssnano中的非标准css属性导致了一个处理calc的小插件被错误标记。解决问题，取消calc插件的使用（失败）。首先想到的就是取消cssnano这个小插件的使用。首先，尝试修改node_modules/@vue/cli-service/lib/config/css.js中的cli配置文件中，将以下段落全部注释掉webpackConfig.plugin('optimize-css').use(require('@intervolga/optimize-cssnano-plugin'),[{sourceMap:options.productionSourceMap&&sourceMap,cssnanoOptions:cssProcessorOptions}])尝试把整个cssnano注释掉，发现npmrunbuild可以通过，css没有压缩.然后看能不能只取消使用calc插件，看https://cssnano.co/cssnano官网，npm，github，没找到完整的参数配置说明，只有https中的简单介绍和例子://cssnano.co/guides/pre...尝试在cli配置文件中设置calc:false没有用，此方法失败。用复制文件的方法暂时解决（成功）取消使用不行，只能等cssnano大师再看，毕竟iPhone用户那么多，总会解决的。但是项目不等人，考虑到即使插件更新了，还是要等vue-cli更新，我打算先想个临时的解决办法。想了想，官方的例子引用了main.js中的css文件，所以需要对css进行优化。但是f7官方其实提供了framework7.min.css这样的文件，不需要我们优化就可以直接使用，所以尝试直接引用index.html中的css文件。首先考虑把css文件拿出来放到public目录下，但是我觉得不合适。一方面，没必要把这个css文件放到版本管理中。另一方面，每次f7更新的时候记得自己更新这个文件很麻烦，所以参考官方文档https://cli.vuejs.org/zh/config/#chainwebpack的语法修改webpack配置，并使用copy插件将文件copy出来。代码如下：//vue.config.jsconstpath=require('路径');module.exports={chainWebpack:config=>{config.plugin('copy-f7-css').use(require('copy-webpack-plugin'),[[{from:path.resolve(__dirname,'./node_modules/framework7/css/framework7.min.css'),to:path.resolve(__dirname,'./dist/css'),}]])}}同时注释掉f7的css引用在main.js中。执行npmrunbuild即可解决问题。只是我们要使用safe-area-inset-这样的属性以后会出错，所以并没有真正解决这个问题，不过也只能先这样解决了。
