360浏览器5兼容模式吗_Vue-cli项目,打包生产模式,部分用户360浏览器极速模式下奔溃...
生活随笔
收集整理的這篇文章主要介紹了
360浏览器5兼容模式吗_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('@$', 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打包項目都是依靠依賴,很多事情我們自己能決定的情況就少了。
如果是用戶多的系統,最好還是不要使用現在五花八門的新技術,只適合少部分人使用的后臺開發。
總結
以上是生活随笔為你收集整理的360浏览器5兼容模式吗_Vue-cli项目,打包生产模式,部分用户360浏览器极速模式下奔溃...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 32个笔画顺序表图片_32个笔画掌握透了
- 下一篇: db2 linux 导入数据_「软件资料