vue.config.js内容解释

一、为甚么引入 path 模块

path 模块，提供了一些工具函数，用于处理文件与目录的路径。path.join()方法用于连接路径，该方法会正确识别当前系统的路径分隔符，如Unix系统是”/“，Windows系统是”\“。__dirname 是node的一个全局变量，即获得当前文件所在目录的完整目录名。

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

module.exports = {

　　　chainWebpack: (config) => {

　　config.resolve.alias // 为指定目录设置全局别名

　　.set('@', resolve('src'))

　　.set('@public', resolve('public'))

　　　　}

二、vue.config.js 文件其他部分配置：

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

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./", // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  outputDir: "dist", // 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
  assetsDir: "static", //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  lintOnSave: true, // 是否开启eslint保存检测
  productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
  chainWebpack: (config) => {
      config.resolve.alias  // 为指定目录设置全局别名
        .set('@', resolve('src'))
        .set('@public', resolve('public'))
  },
  devServer: {
    /* 本地ip地址 */
    host: "localhost",
    port: "80",
    hot: true,
    /* 自动打开浏览器 */
    open: false,
    overlay: {
      warning: false,
      error: true
    }, // 错误、警告在页面弹出
    /* 跨域代理 */
    proxy: {
      "/api": {
        /* 目标代理服务器地址 */
        target: "http://localhost:8080", //
        /* 允许跨域 */
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      } //,
      // '/foo': {
      //   target: '<other_url>'
      // }
    }
    // pluginOptions: {// 第三方插件配置
    //
    // }
  }
};

vue.config.js内容解释

猜你喜欢