VUEcli3.0 第三方CDN引入

最新推荐文章于 2024-04-25 08:57:56 发布

两地相思同淋雪，此生也算共白头

最新推荐文章于 2024-04-25 08:57:56 发布

阅读量1.1k

点赞数

分类专栏：资源优化文章标签： vue.js

本文链接：https://blog.csdn.net/qq_38088386/article/details/108864504

版权

资源优化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VUEcli3.0 第三方CDN引入资源优化

- - - ==注意事项==

在项目中index.html文件添加CDN资源链接
在vue.config.js定义chainWebpack.externals
将main.js等有使用原import引入方式去除

1.1添加CDN资源链接index.html。

// 注意引入顺序,某文件有基于xxx.js的放在前面
<head>
  <link rel="icon" href="./static/logo.png">
  <!-- 引入elementui样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <!-- element-ui -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- echarts相关文件 -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js" > </script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js" ></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js" ></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js" ></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js" ></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js" > </script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js" ></script>
</head>

2.1定义 chainWebpack.externals vue.config.js。

module.exports = {
	 chainWebpack: config => {
        config.externals({
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'element-ui': 'ELEMENT',//element-ui需按照下方注意事项进行
            'echarts': 'echarts'
        })
      },
}

3.1去除import引入方式 main.js...。

	/* eslint-disable */
	// import Vue from 'vue'
	import App from './App.vue'
	import router from './router'
	import axios from 'axios'
	import store from './store'
	import md5 from 'js-md5'
	// import './plugins/element.js'

注意事项

1.xxx is not undefined	//原因:esindt报错
	1.1:针对整个文件不进行eslint检查,将/* eslint-disable */放置于文件最顶部
	1.2:针对代码块临时禁止规则出现警告,注释包裹
		/* eslint-disable */
			console.log(this)
		/* eslint-enable */```
	1.3:针对指定行禁用指定的规则
		console.log(this)// eslint-disable-line no-undef
 
		// eslint-disable-next-line no-undef
		console.log(this)
		
2.element-ui 不生效  
//原因1:原使用.babelrc按需引入
	{
	    "presets": [
	        [
	            "@babel/preset-env",
	            {
	                "modules": false
	            }
	        ]
	    ]
	    //去除按需引入
	    // "plugins": [
	    //     [
	    //         "component",
	    //         {
	    //             "libraryName": "element-ui",
	    //             "styleLibraryName": "theme-chalk"
	    //         }
	    //     ]
	    // ]
	}
	
//原因2:VUE.js(查)
	//将vue也用CDN引入的方式
	<!-- index.html CDN 引入vue -->
	  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!--去除使用import引入-->

两地相思同淋雪，此生也算共白头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUEcli3.0 第三方CDN引入

VUEcli3.0 第三方CDN引入资源优化==注意事项==在项目中index.html文件添加CDN资源链接在vue.config.js定义chainWebpack.externals将main.js等有使用原import引入方式去除1.1添加CDN资源链接index.html。// 注意引入顺序,某文件有基于xxx.js的放在前面<head> <link rel="icon" href="./static/logo.png"> <!-- 引入ele
复制链接

扫一扫