后台管理系统打包

芋圆味糖罐

已于 2022-02-17 20:16:48 修改

阅读量656

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-02-17 15:10:45 首次发布

本文链接：https://blog.csdn.net/m0_62351775/article/details/122982322

本文指导如何在vue项目中创建生产与开发入口文件，调整vue.config.js以管理外部库，并在public/index.html中动态加载CDN资源。通过externals和webpack配置，实现代码按需加载，提高生产效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把main.js文件删除
在src文件夹下建两个文件main-prod.js（生产入口文件）、main-dev.js（开发入口文件）

vue.config.js
module.exports = {
   
   
    chainWebpack:config=>{
   
   
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
   
   
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
            
            //使用externals设置排除项
            config.set('externals',{
   
   
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                lodash:'_',
                echarts:'echarts',
                nprogress:'NProgress',
                'vue-quill-editor':'VueQuillEditor'
            })
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
   
   
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}