staven630 / vue-cli4-config

vue-cli4配置vue.config.js持续更新
https://staven630.github.io/vue-cli4-config/
2.7k stars 617 forks source link

cdn vue3 提示 Vue is not undefined #55

Open carcar96 opened 3 years ago

carcar96 commented 3 years ago

// cdn预加载使用 const externals = { 'vue': 'Vue', // 与这个'Vue'的写法有关吗?Vue3不暴露Vue了,而是createApp }

carcar96 commented 3 years ago

打包时,注释掉:// import { createApp } from 'vue';const app = createApp();改成 const app = Vue.createApp(App); 即可

awesomepeng commented 3 years ago

打包时,注释掉:// import { createApp } from 'vue';const = app = createApp();改成 const app = Vue.createApp(App); 即可

可以写一下你的代码么

carcar96 commented 3 years ago

打包时,注释掉:// import { createApp } from 'vue';const = app = createApp();改成 const app = Vue.createApp(App); 即可

可以写一下你的代码么

[main.js]

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
// const app = Vue.createApp(App);

app.mount('#app');

[vue.config.js]

const isProd = process.env.NODE_ENV === 'production';
module.exports = {
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            if (isProd) {
                args[0].cdn = {
                    css: [],
                    js: [
                        'https://unpkg.com/vue@3.0.11/dist/vue.global.prod.js',//3.0.0版本有问题
                    ]
                }
            }
            return args;
        });
    },
    configureWebpack: config => {
        const plugins = [];

        if (isProd) {
            // externals里的模块不打包
            const externals = {
                'vue': 'Vue',
            }
            config.externals = externals;
        }

        return { plugins }
    }
}