vue-cli2 打包全配置

最新推荐文章于 2025-06-27 10:50:12 发布

笑啊笑

最新推荐文章于 2025-06-27 10:50:12 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44156500/article/details/105965555

本文详细介绍了如何使用Vue CLI 2进行项目打包优化，包括将Vue核心库分离，调整图片打包策略，以及配置Webpack以减小包体积。通过修改Webpack配置，如设置模块规则和公共路径，可以显著提升应用加载速度。

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

vue-cli2 打包全配置

//将vue 全部打包分离出去
//减小limit  过大的图片不去打包成base64  
webpack.base
module.exports = {
      externals: {
        'vue':'Vue',
        'vue-router':'VueRouter',
        'vuex':'Vuex',
        'element-ui':'ELEMENT'
      }，
       module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      }}
  }
  
  
  
  utils
   if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'    //背景图片路径问题
      })
    }
    
    
    webpack.prod
    
    output: {
            publicPath:'./',//解决文件路径问题
      },
    
    
    index
    
      dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: './',    //打包空白  相对路径  打包用的绝对路径
    proxyTable: {
      '/apis':{
          target:'http://x.x.x.x',//默认域名
          changeOrigin:true, //开启跨域
          // secure:false,//https   true是开启不校验
          pathRewrite:{
            '^/apis':'/leite'   //替换包名  如果target 有包名会报错
          }
      }
    },

    // Various Dev Server settings
    host: '0.0.0.0'   //局域网访问
    
    
    main
  Vue.config.productionTip = false  //取消启动提示
 Vue.config.devtools = false //取消检测代码
 Vue.config.silent = true //取消 Vue 所有的日志与警告。