2020 Vue零基础基于Element-UI开发（全）项目优化与部署上线（npm，基于vue ui）下篇

最新推荐文章于 2024-05-26 15:52:05 发布

一百个Chocolate

最新推荐文章于 2024-05-26 15:52:05 发布

阅读量4.1k

点赞数 4

分类专栏： Vue全家桶系列文章标签： vue java nodejs https web

原则上允许部分内容转载，转载请注明原文章地址！

本文链接：https://blog.csdn.net/weixin_42429718/article/details/104079909

版权

文章目录

1、引言

寒假是用来反超的！一起来学习Vue把，这篇博客是关于我们项目优化与上线，请多指教~

2、承接上篇

上篇地址：

附上配置相关源码：

babel.config.js文件配置

// 项目发布阶段需要用到的 babel 插件
const prodPlugins = []
if(process.env.NODE_ENV === 'production'){
   
  prodPlugins.push('transform-remove-console')
}

module.exports = {
   
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
   
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ],
    // 发布产品时的插件数据 
    // ...表示展开运算符 把数组中的每一项展开放在另一个数组中
    ...prodPlugins,
    // 实现路由懒加载
    '@babel/plugin-syntax-dynamic-import'
  ]
}

vue.config.js文件配置

module.exports = {
    
    chainWebpack: config => {
    
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
    
            config.entry('app').clear().add('./src/main-prod.js') 
            config.set('externals', {
    
                vue: 'Vue', 
                'vue-router': 'VueRouter', 
                axios: 'axios', 
                lodash: '_', 
                echarts: 'echarts', 
                nprogress: 'NProgress', 
                'vue-quill-editor': 'VueQuillEditor' 
            }) 
            config.plugin('html').tap(args => {
   
                args[0