webpack5

build/webpack.base.conf.js

@@ -54,8 +54,8 @@ var threadLoaderConfig={
       // 可以修改名称来创建其余选项都一样的池(pool)
       name: "my-pool"
     }
-}
-const publicCssLoaders=process.env.NODE_ENV === 'production'?[{loader:MiniCssExtractPlugin.loader,options:{publicPath:'../'}},'css-loader']:[ 'style-loader','css-loader']
+} 
+const publicCssLoaders=process.env.NODE_ENV === 'production'?[{loader:MiniCssExtractPlugin.loader,options:{publicPath:'../'}},'css-loader','postcss-loader']:[ 'style-loader','css-loader','postcss-loader']
 
 function resolve(dir) {
     return path.join(__dirname, '..', dir)
@@ -79,7 +79,7 @@ module.exports = {
     },
     output: {
         clean:true,
-        path: config.build.assetsRoot,
+        path: config.build.assetsRoot, 
         filename: 'js/[name].[contenthash].js',
         pathinfo: false,
         publicPath: process.env.NODE_ENV === 'production'
@@ -96,16 +96,15 @@ module.exports = {
     // 加载器
     module: {
         // https://doc.webpack-china.org/guides/migrating/#module-loaders-module-rules
-        rules: [
+        rules: [ 
             //...(config.dev.useEslint ? [createLintingRule()] : []),
             {
                 test: /\.vue$/,
-                //include: resolve('src'),
                 use:[
                     threadLoaderConfig,
                     {
                         loader: 'vue-loader',
-                        /**
+                        /** 
                         options:vueLoaderConfig,
                         */
                         options: {
@@ -115,30 +114,30 @@ module.exports = {
                                     { loader: 'cache-loader' },
                                     { loader: 'babel-loader', options: { presets: ['env'] } }
                                 ]
-                            },
+                            }, 
                             extractCSS: true,
-                            hotReload:true,
-
-                        },
+                            hotReload:true, 
+                           
+                        },     
                     }
                 ]
-
-
-            },
+                
+                
+            }, 
             {
                 test: /\.css$/,
                 use: publicCssLoaders,
-            },
+            }, 
             {
                 test: /\.(sa|sc)ss$/,
-                use: publicCssLoaders.concat([
+                use: publicCssLoaders.concat([  
                     // 将 Sass 编译成 CSS
                     'sass-loader',
                 ]),
-            },
+            }, 
             {
                 test: /\.less$/,
-                use: publicCssLoaders.concat([
+                use: publicCssLoaders.concat([ 
                     // 将 Sass 编译成 CSS
                     'less-loader',
                 ]),
@@ -149,7 +148,7 @@ module.exports = {
                     // 将 Sass 编译成 CSS
                     'stylus-loader',
                 ]),
-            },
+            }, 
             { // 配置Babel将ES6+ 转换为ES5
                 test: /\.js$/,
                 use:[
@@ -159,10 +158,10 @@ module.exports = {
                         options: {
                             presets: ['env'],
                             plugins: ['transform-runtime']
-                        },
+                        }, 
                     },
                 ],
-                include: resolve('src'),
+                include: resolve('src'), 
             },
             {
                 test: /\.svg$/,
@@ -181,7 +180,7 @@ module.exports = {
                 }
             },
             {
-                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 
                 type: 'asset/resource',
                 generator: {
                     filename: 'media/[hash][ext][query]'
@@ -196,27 +195,23 @@ module.exports = {
             }
         ]
 
-    },
+    }, 
     plugins: [
         new VueLoaderPlugin(),
     ],
     optimization: {
         splitChunks: {
-            chunks: 'all',
-            minSize: 200000,
-            enforceSizeThreshold: 400000,
+            chunks: 'all',  
             cacheGroups: {
                 defaultVendors: {
                     test: /[\\/]node_modules[\\/]/,
                     priority: -10,
-                    reuseExistingChunk: true,
-                    enforceSizeThreshold: 400000,
+                    reuseExistingChunk: true, 
                 },
                 default: {
                     minChunks: 2,
                     priority: -20,
-                    reuseExistingChunk: true,
-                    enforceSizeThreshold: 400000,
+                    reuseExistingChunk: true, 
                 },
             },
         },

build/webpack.prod.conf.js

@@ -68,7 +68,6 @@ const webpackConfig = merge(baseWebpackConfig, {
     }),
   ], 
   optimization: {
-      moduleIds:'hashed',
       minimize: true,
       minimizer:[
         new CssMinimizerPlugin({
@@ -83,11 +82,7 @@ const webpackConfig = merge(baseWebpackConfig, {
         })
       ],
       splitChunks: {
-          chunks: 'all',
-          minSize: {
-              javascript: 80000,
-              webassembly: 80000,
-          },
+          chunks: 'all'
       },
   },
 })

src/components/Image/UploadImage.vue

@@ -250,7 +250,8 @@
 					pageSize: this.pageInfo.pageSize,
 					pageNum: this.pageInfo.pageNum,
 					total: this.pageInfo.total
-				};
+				}; 
+				
 				if(this.pageInfo.orderFields!=null && this.pageInfo.orderFields.length>0){
 					let orderBys=[];
 					for(var i=0;i<this.pageInfo.orderFields.length;i++){ 
@@ -273,6 +274,7 @@
 					return;
 	        	}
 				params.branchId = this.branchId;
+				this.selectImages=[];
 				this.listLoading = true;
 				listImage(params).then((res) => {
 					var tips=res.data.tips;

src/components/Tinymce/index.vue

@@ -1,22 +1,25 @@
 <template>
   <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
-    <textarea :id="tinymceId" class="tinymce-textarea" />
+    <textarea :id="tinymceId" class="tinymce-textarea" /> 
 	<el-dialog id="editor-dialog" class="image-dialog" title="选择图片" :visible.sync="dialogVisible"   width="70%" :close-on-click-modal="false" append-to-body>
 		<upload-image  :multiple="true" :branch-id="userInfo.branchId" :dept-id="userInfo.deptid" :visible="dialogVisible" @cancel="dialogVisible=false" @confirm="handleConfirm"></upload-image>
-	</el-dialog>
+	</el-dialog> 
   </div>
 </template>
+
 <script>
-import config from '@/common/config';//全局公共库import
-import UploadImage from '@/components/Image/UploadImage';
-import { mapGetters } from 'vuex'
+
+
+import config from '@/common/config';//全局公共库import 
+import UploadImage from '@/components/Image/UploadImage';	
+import { mapGetters } from 'vuex' 
 import plugins from './plugins'
-import toolbar from './toolbar'
+import toolbar from './toolbar' 
 
-export default {
+export default { 
   name: 'Tinymce',
   components: { UploadImage },
-  props: {
+  props: { 
     value: {
       type: String,
       default: ''
@@ -39,10 +42,10 @@ export default {
     }
   },
   data() {
-    return {
+    return { 
 		imageList:[],
 		dialogVisible:false,
-		editorHtmlData:this.value,
+		editorHtmlData:this.value, 
       tinymceId: 'vue-tinymce-'+new Date().getTime() + ((Math.random() * 1000).toFixed(0) + ''),
       fullscreen: false,
       languageTypeList: {
@@ -54,19 +57,19 @@ export default {
   computed: {
     language() {
       return this.languageTypeList[this.$store.getters.language]
-    },
+    }, 
 	...mapGetters([
 		'userInfo'
 	])
   },
   watch: {
-    value(val) {
+    value(val) { 
 		if(val==this.editorHtmlData){
 			return;
 		}
-		this.$nextTick(() =>  window.tinymce.get(this.tinymceId).setContent(val || ''))
+		this.$nextTick(() =>  window.tinymce.get(this.tinymceId).setContent(val || '')) 
     },
-	editorHtmlData(val) {
+	editorHtmlData(val) { 
 		this.$emit("input",val)
     },
     language() {
@@ -75,12 +78,12 @@ export default {
     }
   },
   mounted() {
-	  this.$nextTick(() => this.initTinymce())
+	  this.$nextTick(() => this.initTinymce()) 
   },
   /**
   activated() {
     this.initTinymce()
-
+	
   },
   deactivated() {
     this.destroyTinymce()
@@ -111,32 +114,33 @@ export default {
         imagetools_cors_hosts: ['www.qingqinkj.com', 'codepen.io'],
         default_link_target: '_blank',
         link_title: false,
+        convert_urls:false,
         fontsize_formats: "8pt 10pt 12pt 14pt 18pt 20pt 24pt 28pt 30pt 36pt 38pt 40pt 42pt 46pt 48pt",
         font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
         nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
-        init_instance_callback: editor => {
+        init_instance_callback: editor => { 
           if (_this.value) {
             editor.setContent(_this.value)
-          }
-          editor.on('NodeChange Change KeyUp SetContent', () => {
-			_this.editorHtmlData=editor.getContent()
+          } 
+          editor.on('NodeChange Change KeyUp SetContent', () => { 
+			_this.editorHtmlData=editor.getContent() 
           })
         },
         setup(editor) {
-
+			
           editor.on('FullscreenStateChanged', (e) => {
             _this.fullscreen = e.state
           })
-
+		   
 		  editor.addButton('imageList',{
 			  text:'图片库',
 			  icon:false,
 			  onclick:function(){
-				 _this.dialogVisible=true;
-          _this.$nextTick(()=>{
+				 _this.dialogVisible=true;  
+          _this.$nextTick(()=>{ 
             //document.getElementById("editor-dialog").style.zIndex="100000"
-          })
-
+          }) 
+           
 			  }
 		  })
         }
@@ -173,9 +177,9 @@ export default {
         //     console.log(err);
         //   });
         // },
-      })
+      }) 
 	  this.setContent(this.value)
-
+    
     },
     destroyTinymce() {
       const tinymce = window.tinymce.get(this.tinymceId)
@@ -186,13 +190,13 @@ export default {
         tinymce.destroy()
       }
     },
-    setContent(value) {
+    setContent(value) { 
       window.tinymce.get(this.tinymceId).setContent(value)
     },
     getContent() {
       window.tinymce.get(this.tinymceId).getContent()
     },
-	insertImage () {
+	insertImage () {  
 		let imageList = this.imageList;
 		let imageHtml = "";
 		(imageList || []).map(item => {
@@ -203,10 +207,10 @@ export default {
 		}
 		this.dialogVisible = false;
 	},
-
-	handleConfirm(imgs){
+	
+	handleConfirm(imgs){   
 		this.imageList=imgs//{url:xxx,remark:xxxx}
-		this.insertImage();
+		this.insertImage(); 
 	},
     imageSuccessCBK(arr) {
       const _this = this
@@ -247,4 +251,4 @@ export default {
   z-index:20000 !important;
 }
 
-</style>
+</style>