前言:
此时同学们对“js判断360浏览器”都比较注重,我们都想要剖析一些“js判断360浏览器”的相关内容。那么小编也在网络上汇集了一些关于“js判断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: [], // 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('@$', 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: ';, // 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打包项目都是依靠依赖,很多事情我们自己能决定的情况就少了。
如果是用户多的系统,最好还是不要使用现在五花八门的新技术,只适合少部分人使用的后台开发。
标签: #js判断360浏览器 #html默认极速模式