浏览器环境兼容性browserify插件

206 阅读1分钟

添加 crypto-browserifystream-browserify 和 vm-browserify 依赖,支持项目中的浏览器环境兼容性。

vite 配置如下

const vueConfig = {
  // publicPath:'./',
  configureWebpack: {
    resolve: {
      fallback: {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "vm": require.resolve("vm-browserify")
      }
    },
    plugins: [
      new webpack.IgnorePlugin({
        contextRegExp: /^\.\/locale$/,
        resourceRegExp: /moment$/
      }),
      new webpack.DefinePlugin({
        APP_VERSION: `"${packageJson.version}"`,
        GIT_HASH: JSON.stringify(getGitHash()),
        BUILD_DATE: buildDate
      })
    ]
  
  },
  chainWebpack: config => {
    config.resolve.alias.set('@$', resolve('src'))
    // fixed svg-loader by https://github.com/damianstasik/vue-svg-loader/issues/185#issuecomment-1126721069
		const svgRule = config.module.rule('svg')
		config.module.rules.delete('svg')

		config.module.rule('svg')
			.oneOf('svg_as_component')
				.resourceQuery(/inline/)
				.test(/\.(svg)(\?.*)?$/)
				.use('babel-loader')
					.loader('babel-loader')
					.end()
				.use('vue-svg-loader')
					.loader('vue-svg-loader')
					.options({
						svgo: {
							plugins: [
								{ prefixIds: true },
								{ cleanupIDs: true },
								{ convertShapeToPath: false },
								{ convertStyleToAttrs: true }
							]
						}
					})
					.end()
				.end()

  },

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          'primary-color': '#c20000',
          'border-radius-base': '2px'
        },
        javascriptEnabled: true
      }
    },
    extract: false
  },

  devServer: {
  },
  productionSourceMap: false,
  lintOnSave: undefined,

}