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"));
  }
};