Vue-cli项目，打包生产模式，部分用户360浏览器极速模式下奔溃

内容导航：

Vue-cli项目，打包生产模式，部分用户360浏览器极速模式下奔溃

记录app webview内嵌vue单页应用所遇到的坑

vue-cli所做的项目在部分低版本手机打开是空白,怎么回事，求大神指点

使用vue框架开发，版本更新，怎么解决用户浏览器缓存问题

一、Vue-cli项目，打包生产模式，部分用户360浏览器极速模式下奔溃

一直使用macOS系统下chrome浏览器下开发，仅仅使用到ant design pro vue 组件库，默认的脚手架配置。

客户使用win7下360安全浏览器访问，自动变成”兼容“模式访问，页面很多地方变形的。

手动切换极速模式就页面奔溃无法打开。

vue配置文件如下！

babel.config.js

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)const plugins = []if (IS_PROD) {  plugins.push('transform-remove-console')}// lazy load ant-design-vue// if your use import on Demand, Use this codeplugins.push(['import', {  'libraryName': 'ant-design-vue',  'libraryDirectory': 'es',  'style': true // `style: true` 会加载 less 文件}])module.exports = {  presets: [    '@vue/cli-plugin-babel/preset',    [      '@babel/preset-env',      {        'useBuiltIns': 'entry',        'corejs': 3      }    ]  ],  plugins}

vue.config.js

const path = require('path')const webpack = require('webpack')const createThemeColorReplacerPlugin = require('./config/plugin.config')function resolve (dir) {  return path.join(__dirname, dir)}const isProd = process.env.NODE_ENV === 'production'const assetsCDN = {  // webpack build externals  externals: {    // vue: 'Vue',    // 'vue-router': 'VueRouter',    // vuex: 'Vuex',    // axios: 'axios'  },  css: [],  // https://unpkg.com/browse/vue@2.6.10/  js: [    // '//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',    // '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',    // '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',    // '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'  ]}// vue.config.jsconst vueConfig = {  configureWebpack: {    // webpack plugins    plugins: [      // Ignore all locale files of moment.js      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)    ],    // if prod, add externals    externals: isProd ? assetsCDN.externals : {}  },  chainWebpack: (config) => {    config.resolve.alias      .set('@#39;, resolve('src'))    const svgRule = config.module.rule('svg')    svgRule.uses.clear()    svgRule      .oneOf('inline')      .resourceQuery(/inline/)      .use('vue-svg-icon-loader')      .loader('vue-svg-icon-loader')      .end()      .end()      .oneOf('external')      .use('file-loader')      .loader('file-loader')      .options({        name: 'assets/[name].[hash:8].[ext]'      })    // if prod is on    // assets require on cdn    if (isProd) {      config.plugin('html').tap(args => {        args[0].cdn = assetsCDN        return args      })    }  },  css: {    loaderOptions: {      less: {        modifyVars: {          // less vars，customize ant design theme          'primary-color': '#F5222D',          'link-color': '#F5222D'          // 'border-radius-base': '4px'        },        // DO NOT REMOVE THIS LINE        javascriptEnabled: true      }    }  },  devServer: {    // development server port 8000    port: 8000    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11    // proxy: {    //   '/api': {    //     target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',    //     ws: false,    //     changeOrigin: true    //   }    // }  },  // disable source map in production  productionSourceMap: false,  lintOnSave: undefined,  // babel-loader no-ignore node_modules/*  transpileDependencies: []}// preview.pro.loacg.com only do not use in your production;if (process.env.VUE_APP_PREVIEW === 'true') {  console.log('VUE_APP_PREVIEW', true)  // add `ThemeColorReplacer` plugin to webpack plugins  vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())}module.exports = vueConfig

网传Babel不行 ，需要PolyFill，开发依赖如下！

360极速模式切换也是坑？看网友文章

官方文档真是无卵用

这是啥情况！虽然我不用国内浏览器，但是用户普遍都一样，我的电脑win7下正常，用户win7 win10也能出现各种问题。而webpack打包项目都是依靠依赖，很多事情我们自己能决定的情况就少了。

如果是用户多的系统，最好还是不要使用现在五花八门的新技术，只适合少部分人使用的后台开发。

一、记录app webview内嵌vue单页应用所遇到的坑

so在这个过程中无可避免的还是踩了一些坑，所以记录之，先大致说下用到的技术栈：vue全家桶（vue/vue-router/vuex）、sass、axios还有一套ui框架mint-ui，大致也就这些。下面来扒扒都遇到哪些坑。

1.vue-cli脚手架打包的项目部署到服务器上打开空白
首先可以确保路径是没问题的，vue-cli打包生产环境直接修改config目录下的index文件即可。将assetsPublicPath指向你所要放置的服务器目录，并用最后一个文件夹名作为你的项目名。如 。 那路径没问题的话。问题出在哪里呢？经过排查，是vue-router中将mode设置为'history'的缘故。由于一开始以hash模式的url是带'#'号的，本来想着让url好看点，所以用了history模式。虽然在本地调试的时候没问题，但是不部署的话还是需要后台进行相关配置的。这里百度一大堆，不赘述了，随便贴个地址， 看这里

2.webview上自带的坑
讲真的这个只能找你们移动开发的同事。比如我这边遇到的是H5页面内嵌的时候上拉下拉会出现回弹的效果，这是他们加上的，这个难免会对h5造成一些手势冲突。比如我只是想滑动底部的时间选择器来选时间，但是页面不受控制会自动上弹。还有就是定位在中部或底部的输入框，理应在弹出软键盘时自动将键盘顶上去的，这个也应该由移动端开发那边来做相关设置。

3.单页应用不重载页面导致无法调用IOS的某些回调函数
这个是真的坑。在浏览器上跑都好好的，内嵌进app的时候发现ios打开页面后一直有一朵小菊花在loading，尽管数据已经加载完成了。切换页面也一样，除非刷新页面。那问题来了，谁的锅？又是经过一系列排查，发现这个是单页应用跟移动端那边开发的控件相互作用引起的坑。（关我毛事?）那个loading控件是移动端那边用来判断webview加载情况的，在网络请求跟数据请求时都会调用打开这个控件，然而悲剧的是关闭这个控件也就是 WebviewDidFinishLoad 函数却必须是页面有进行重载才会发起调用的，也就是说loading你是开了，但是我 单页应用 怎么来都是在一个页面上操作，自然 不会重载 ，所以也就导致了那朵小菊花一直在转，这也是为什么强制刷新的话可以关闭掉loading控件的原因。这个嘛安卓那边不会有问题，所以应该是ios开发那边的问题，就算loading也应该有个时长可以关闭，或者可以写个接口通过webview的形式让前端去手动调用关闭loading控件，都是可以的。

4.es6对于一些老旧的安卓机型和浏览器的兼容问题
这个一开始还是比较头痛的，毕竟是上了线才发现的问题，陆陆续续在后台收到一些安卓机的反馈，打开活动页面一片空白。看了下大多是安卓4.4.2还有一些4.4以下的安卓机型。这尼玛vuejs不是兼容到安卓4.4吗？所以一开始以为是axios跟mint-ui的问题，但后面发现其实不是。主要原因是对es6兼容不够到位，虽然vue-cli引入了babel对js语法进行降级，但是还是有些老旧的机型会发生各种各样的问题，这里需要引入一个叫babel-polyfill的包。所以你只需只在你引入import vue之前 import babel-polyfill进来就可以了，主要是为了让es6对个别机型做到兼容。

二、vue-cli所做的项目在部分低版本手机打开是空白,怎么回事，求大神指点

清理一下磁盘碎片和系统垃圾。不行就----------------请不要盗用我的答案！！一号方案（新X）注意（原创）： 1．安全模式下，效果更好！ 2. 以下所要使用的软件，都要安装或升级到最新版本，以保证使用的效果。 3. 不杀毒，直接使用以下方法也可以 。若效果不好，就先在安全模式下用优质杀毒软件（如：卡巴斯基）杀一下，360安全卫士最好也用一下，之后，再用以下方法。 （用360安全卫士的“杀木马”----“全盘扫描”。杀完重启。） 以下方法，不一定都要用，可以一个一个去试。有时，仅第一个就管用了。 一. 关闭浏览器，打开新版本360安全卫士的“系统修复”，扫描后，再点“一键修复” 。 再用360急救箱（360安全卫士的“功能大全”里有。若未安装360安全卫士，也可单另安装急救箱。）【按步骤操作：先“开始急救”；扫描完后，重启；再点“系统修复” （可以全选）――“立即修复”。 接着，点“DLL文件恢复”，添加系统检测时所得知丢失的DLL文件，再点“立即修复’。“修复网络”视情况而决定是否修复。完后，应重启。】 二.用360安全卫士的“清理插件”进行扫描，扫除恶意插件后，进行清理。完后应重启。 三.用windows清理助手（从网上下载）。扫描后(若扫出东西，都勾并清理)，再用故障修复（全选），然后在桌面点鼠标右键刷新。安全模式下效果好。 也可考虑用金山急救箱【勾上“扩展扫描”，点扫描后，如果出现可以修复的项目，全选后，点“立即处理”，完后重启。】 也可下个IE修复专家 5.21,或雅虎ie修复专家(也有人用黄山修复专家)。，用完后，你再试试：点网页上面的 工具->Internet选项->把主页改成你想要的。 也可：1. 下载一个金山网盾。（百度里搜索‘金山网盾’第一个下载就是最新版本）2. 安装后，点一键修复。扫出东西后，点立即处理。 强调------1.修复中，杀软或360有提示时，请点允许。操作中如提示重启就重启下电脑。2.效果不好时，看“注意”中的三点。 3. 完后，效果不好的话，也可考虑系统还原一下（选好还原点）。 祝你成功 ！

三、使用vue框架开发，版本更新，怎么解决用户浏览器缓存问题

vue-cli里的默认配置，css和js的名字都加了哈希值，所以新版本css、js和就旧版本的名字是不同的，不会有缓存问题。

不过值得注意的是，把打包好的index.html放到服务器里去的时候，index.html在服务器端可能是有缓存的，这需要在服务器配置不让缓存index.html。