vuecli3 項目添加配置文件以及使用@映射、代理

在根目錄下新建 vue.config.js

1、vue.config.js中配置路徑別名方法

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views',
      }
    }
  },
}

之所以用'@/assets'，是因為偷了個懶利用3.x中/node_modules/@vue/cli-service/lib/config/base.js中已經配好的@路徑,有興趣的可以進入文件里面看一看

2、使用vuecli 2.0的方式設置

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("@", path.join(__dirname, "src"))
      .set("components", resolve("src/components"));
  }
};

 

這個我個人配置的項目config   （映射、代理服務）

// vue.config.js
const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  baseUrl: "/",
  outputDir: "dist", // 打包的目錄
  lintOnSave: true, // 在保存時校驗格式
  productionSourceMap: false, // 生產環境是否生成 SourceMap
  //代理服務  配置項目跨域用到
  devServer: {
    open: true, // 啟動服務后是否打開瀏覽器
    host: "0.0.0.0",
    port: 8080, // 服務端口
    https: false,
    hotOnly: false,
    proxy: {
      "/api": {
        target: "http://test.xxx.com.cn",
        ws: true, // proxy websockets
        changeOrigin: true, // needed for virtual hosted sites
        pathRewrite: {
          "^/api": "" // 設置過濾關鍵字api ，
          //   '^/': ''  // 設置過濾關鍵字為空 ，
        }
      }
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set("@", path.join(__dirname, "src"))
      .set("components", resolve("src/components"));
  }
};