viser-vue打包编译运行报错Cannot assign to read only property ‘constructor‘ of object ‘#＜t＞‘

最新推荐文章于 2024-07-22 08:55:10 发布

m0_49280365

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量802

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_49280365/article/details/131002810

版权

1.问题场景：

vue开发一个web网站项目使用了viser-vue，开发环境中无任何问题，但项目打包后本地(express)安装运行却报错。

2.报错信息：

Uncaught TypeError: Cannot assign to read only property ‘constructor’ of object ‘#’

3.报错原因：

初步判断是viser依赖的@antv/g2、@antv/g2-plugin-slider经webpack编译打包后会出现问题

4.解决方案：

使用第三方 CDN (或下载至本地) 分离部分组件，如 vue.config.js 下的 assetCDN 属性所配置（具体请自行查询网上 webpack 相关教程）

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const isProd = process.env.NODE_ENV === 'production'

const assetsCDN = {
  // webpack build externals
  externals: {
    'viser-vue': 'ViserVue'
  },
  css: [],
  js: ['//unpkg.com/viser-vue/umd/viser-vue.min.js']
}
module.exports = defineConfig({
  configureWebpack: {
    // if prod, add externals
    externals: isProd ? assetsCDN.externals : {}
  },
})

<!--index.html-->
	<head>
		<!-- require cdn assets css -->
	    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
	    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
	    <% } %>
	</head>

	<body>
	    <!-- require cdn assets js -->
	    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
	    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
	    <% } %>
	</body>

m0_49280365

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
viser-vue打包编译运行报错Cannot assign to read only property ‘constructor‘ of object ‘#＜t＞‘

viser-vue打包编译运行报错Cannot assign to read only property ‘constructor‘ of object ‘#＜t＞‘
复制链接

扫一扫