vue项目配置方案

以下配置适用于cli3.0以上，当你开发一个项目需要自定义一下配置就需要在根目录下新建一个vue.config.js文件

配置跨域

跨域问题在开发中是经常遇到的问题，针对这个问题webpack提供了解决方案,

使用的时候在axios的baseURL配置项上写上'/api/'

module.exports = {
  // 设置代理
  devServer: {
    hot: true, //热加载
    host: "0.0.0.0", //ip地址
    port: 8080, //端口  
    https: false, //false关闭https，true为开启  
    open: true, //自动打开浏览器  
    proxy: {
      "/api": {      //本地 
        target: "http://localhost:3000",      
        ws: false, // 如果要代理 websockets
        changeOrigin: true, // 是否改变请求的url
        pathRewrite: { // 重定向
          "^/api": ""
        }
      }
  }
},
};

修复热更新失效  

module.exports = {
  chainWebpack: config => {
   // 修复HMR
   config.resolve.symlinks(true);
  }
}

添加别名

当你太长的文件路径你不想写，那么设置别名绝对可以解救你

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
     .set('@', resolve('src'))
     .set('assets', resolve('src/assets'))
     .set('components', resolve('src/components'))
     .set('layout', resolve('src/layout'))
     .set('base', resolve('src/base'))
     .set('static', resolve('src/static'));
  }
}

配置externals

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖

module.exports = {
  configureWebpack: config => {
    config.externals = {
     'vue': 'Vue',
     'element-ui': 'ELEMENT',
     'vue-router': 'VueRouter',
     'vuex': 'Vuex',
     'axios': 'axios'
    }
  }
}

去掉注释和console.log

生产环境去掉注释和console.log

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const isProduction = process.env.NODE_ENV === "production";

module.exports = {
  configureWebpack: config => {
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ["console.log"] //移除console
            }
          }
        })
      );
    }
    return { plugins };
  }
}

开启Gzip压缩，包含文件js、css

const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启压缩

module.exports = {
  configureWebpack: config => {
    const plugins = [];
    plugins.push(
      new CompressionWebpackPlugin({
        algorithm: "gzip",
        test: /\.(js|css)$/, // 匹配文件名
        threshold: 10000, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 不删除源文件
        minRatio: 0.8 // 压缩比
      })
    );
    return { plugins };
  }
}

自定义ico图

脚手架创建的项目public里的img图片都想删掉换成自己的？那试一下以下配置吧

module.exports = {
  pwa: {
    iconPaths: { 
      favicon32: "img/icons/favicon-32x32.png",
      favicon16: "img/icons/favicon-16x16.png",
      appleTouchIcon: "img/icons/favicon-180x180.png",
      maskIcon: "img/icons/favicon.svg",
      msTileImage: "img/icons/favicon-144x144.png"
    },
    manifestOptions: {
      icons: [
        {
          src: "img/icons/miaow-192x192.png",
          sizes: "192x192",
          type: "image/png"
        },
        {
          src: "img/icons/miaow-512x512.png",
          sizes: "512x512",
          type: "image/png"
        }
      ]
    }
  },
}

后面要是有用到其他的配置会继续往下更