vue-cli3基本vue.config.js配置MARK

最新推荐文章于 2024-12-31 17:23:51 发布

原创最新推荐文章于 2024-12-31 17:23:51 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Vue CLI3的vue.config.js配置，包括build部署相关设置，如生成路径，以及反向代理配置。同时，展示了如何关闭eslint检测以避免空格等警告，并提供自定义快捷目录的方法。

let path = require("path");
const webpack = require("webpack");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  publicPath: "/static/template/calendar/", // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  lintOnSave: false,
  //反向代理
  devServer: {
    // 环境配置
    proxy: {
      "/app": {
        target: "http://dev-app.cmbi.online",
        // pathRewrite:{
        //   '^/app':'/app'
        // }
      },
    },
    overlay: {
      warnings: false,
    },
  },
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src")) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set("C", resolve("src/components"))
      .set("A", resolve("src/api"));
  },
};

关闭eslint检测

lintOnSave: false,

build部署相关配置

部署成功后生成的路径为

publicPath:"/static/template/calendar/"  ====>
/static/template/calendar/js/app.5827e6ba.js

部署成功后生成的路径为

publicPath:"./static/template/calendar/"  ====>
static/template/calendar/js/app.5827e6ba.js

反向代理

//反向代理
      devServer: {
        // 环境配置
        proxy: {
          "/app": {
            target: "http://dev-app.cmbi.online",
            // pathRewrite:{
            //   '^/app':'/app'
            // }
          },
        },
        overlay: {
          warnings: false,
        },
      },

proxy下面最简洁的情况下只需要

"/app": {
        target: "http://dev-app.cmbi.online",
      },

去除麻烦的eslint警告（空格之类的）

 overlay: {
      warnings: false,
    },

自定义快捷目录

chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src")) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set("C", resolve("src/components"))
      .set("A", resolve("src/api"));
  },

可以用