VUE项目使用cdn引用

1. 在vue.config.js里面配置cdn

本人对vue、element-ui进行了cdn引用

chainWebpack(config) {
        const cdn = {
            css: ['https://unpkg.com/element-ui@2.15.3/lib/theme-chalk/index.css'],
            js: ['https://cdn.jsdelivr.net/npm/vue@2', 'https://unpkg.com/element-ui@2.15.3/lib/index.js']
        }
        config.externals({
            'vue': 'Vue',
            "element-ui": "ELEMENT",
        })
        config
            .plugin('html')
            .tap(args => {
                args[0].cdn = cdn
                return args
            });
    },

2.在public/index.html文件配置

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.3/lib/theme-chalk/index.css">

    <script src="https://unpkg.com/element-ui@2.15.3/lib/index.js"></script>

3.易错问题，vue使用cdn导致element-ui失效问题

错误写法：

<!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.3/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.15.3/lib/index.js"></script>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

正确写法：

<!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.3/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.15.3/lib/index.js"></script>

注意顺序！！！

element 用cdn导入，组件使用无效

element用cdn导入前面要加一个vue的cdn，这个大家都知道，但问题是如果你npm里面有vue的话，他会先用你npm里的vue来渲染你的组件，此时element还没有install到你的vue里所以会报错，在webpack里配置externals把vue从打包里去掉