vconsole设置

最新推荐文章于 2024-06-17 14:15:44 发布

文仟传输助手

最新推荐文章于 2024-06-17 14:15:44 发布

阅读量719

点赞数 6

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45072479/article/details/134691751

版权

方式1 引入cdn

//index.html文件
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no, email=no">

	// 引入vconsole的cdn文件
    <% if (process.env.NODE_ENV === 'development') { %>
      <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
      <script>
        new window.VConsole();
      </script>
    <% } %>
  
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

方式2 使用移动端模拟开发者工具

//package.json
"devDependencies": {
    "vconsole-webpack-plugin": "^1.4.2",
}

// vue.config.js
const vConsolePlugin = require('vconsole-webpack-plugin') // 引入移动端模拟开发者工具 插件 （另：https://github.com/liriliri/eruda）
const CompressionPlugin = require('compression-webpack-plugin') // Gzip
const fs = require('fs')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //Webpack包文件分析器
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
const resourcesLoader = fs.readFileSync(resolve('../../common/resource-loader.js'))

module.exports = {
  publicPath: process.env.PUBLIC_PATH || '/',
  outputDir: 'output/',
  runtimeCompiler: true,
  parallel: false,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:9128',
        ws: true,
        changeOrigin: true,
      },
    },
    disableHostCheck: true,
  },
  lintOnSave: false,
  pluginOptions: {
    'style-resources-loader': {
      patterns: [],
    },
  },
  css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 100,
            minPixelValue: 2,
            propWhiteList: [],
          }),
        ],
      },
    },
  },
  chainWebpack: (config) => {
    //set context /src
    config.plugins.delete('fork-ts-checker')
    config.context(path.resolve(__dirname, 'src'))
    //set entry /src/main.ts`
    config
      .entry('app')
      .clear()
      .add('./app.ts')

    config.resolve.alias.set('vue$', 'vue/dist/vue.js').set('@', path.resolve(__dirname, 'src'))
    config.resolve.extensions.add('.vue')
    // 移除undefined配置，会和webpack-html-plugin 冲突
    config.module.rule('undefined').clear()

    config.plugin('html').tap((args) => {
      args[0].template = resolve('index.html')
      if (process.env.NODE_ENV !== 'development') {
        args[0].inject = false
        args[0].resourcesLoader = resourcesLoader
        args[0].minify = {
          minifyCSS: true,
          minifyJS: true,
        }
      }
      return args
    })

    // 使用vconsole工具
    process.env.NODE_ENV === 'development' &&
      config.plugin('vconsole').use(vConsolePlugin, [{ filter: [], enable: true }])

    process.env.NODE_ENV === 'production' &&
      config.plugin('compression').use(CompressionPlugin, [
        {
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(js|css)$'),
          threshold: 8192, // Only assets bigger than this size are processed. In bytes.
          minRatio: 0.8,
        },
      ])
  },
  // 线上关闭sourcemap
  productionSourceMap: false,
}