vue.config基本配置及跨域代理

const path = require("path");
const resolve = function(dir) {
  return path.join(__dirname, dir);
};
module.exports = {
  css: {
    //将组件内的CSS 提取到一个单独的Css 文件(只用在生产环境中) 
    //也可以是一一个传递给、 extract text -webpack-p1ugin^ 的选项对象
    extract: true,//Default: 生产环境下是 true,开发环境下是 false
    //是否开启Css source map?
    //设置为 true 之后可能会影响构建的性能。
    sourceMap: false,
    //为预处理器的loader 传递自定义选项。比如传递给
    // css-loader 时,使用、{ Css: { ... } }。|
    loaderOptions: {
      css: {
        //这里的选项会传递给css -loader
      },
      postcss: { //这里的选项会传递给postcss- loader
        plugins: [
          require("autoprefixer")({
            // 配置使用 autoprefixer
            overrideBrowserslist: ["last 15 versions"],
          }),
          require("postcss-pxtorem")({
            rootValue: 37.5,
            selectorBlackList: ["ig"],
            propList: ["*"],
            exclude: /node_modules/,
          }),
        ],
      },

    },
    //为所有的CSS及其预处理文件开启CSS Modules。
    //这个选项不会影响*.vue^ 文件。
    //默认情况下,只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 true 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。
    modules: false,

  },
  publicPath: "/commonToolsMobile/",//项目基础路径
  outputDir: "dist",//构建时输出路径
  assetsDir: "static",//静态资源目录
  lintOnSave: false, // 是否开启eslint保存检测
  productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
  //  是否使用带有浏览器内编译器的完整构建版本
  runtimeCompiler: false,
  //  babel-loader 默认会跳过 node_modules 依赖。
  transpileDependencies: [ /* string or regex */],
  //  设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
  crossorigin: "",
  //  在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
  integrity: false,
  pages: {//用于多页配置,默认是undefined
    index: {
      // page 的入口文件
      entry: ' src/index/main.js',
      //模板文件
      template: "public/index.html",
      //在dist/index.html 的输出文件
      filename: ' index.html',
      // template 中的title标签需要是<title><%= htmlWebpackPlugin. options .title %></title>
      title: "Index Page",
      //在这个页面中包含的块,默认情况下会包含
      //提取出来的通用chunk 和vendor chunk。
      chunks: [' chunk-vendors', ' chunk -common', 'index']
    },
    //当使用只有入口的字符串格式时,
    //模板文件默认是、 public/subpage. html、
    //如果不存在,就回退到、 public/index . html。
    // 输出文件默认是 ) subpage .html~ 。
    subpage: 'src/subpage/main.js',
  },
  // 是否在保存的时候使用、eslint -loader~ 进行检查。
  lintOnSave: true,
  //是否 使用带有浏览器内编译器的完整构建版本
  runtimeCompiler: false,
  //  调整内部的 webpack 配置
  configureWebpack: () => { }, //(Object | Function)
  chainWebpack: (config) => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@v", resolve("src/views"))
      .set("@c", resolve("src/components"))
      .set("@u", resolve("src/utils"))
      .set("@s", resolve("src/service")); /* 别名配置 */
    config.optimization.runtimeChunk("single");
  },
  //所有 webpack-dev-server 的选项都支持
  devServer: {
    // host: "localhost",
    /* 本地ip地址 */
    host: "192.168.1.120",
    port: "8086",
    hot: true,
    /* 自动打开浏览器 */
    open: true,
    overlay: {
      warning: false,
      error: true,
    },
    /* 跨域代理 */
    proxy: {
      "/commonTools/": {
        /* 目标代理服务器地址 */
        target: " http://192.168.1.180:8899",
        // target: " https://www.ahshequ.cn",
        // target: " https://www.0551cx.com/",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/commonTools/": "/commonTools/",
        },
      },
      "/hfcx_multi_project": {
        target: "https://www.0551cx.com",
        changeOrigin: true,
        pathRewrite: {
          "^/hfcx_multi_project": "/hfcx_multi_project",
        },
      },
      "/hfcxCommonInterface": {
        target: "https://www.0551cx.com",
        changeOrigin: true,
        pathRewrite: {
          "^/hfcxCommonInterface": "/hfcxCommonInterface",
        },
      },
    },
  },
  // 三方插件的选项

  pluginOptions: {

    // ...

  }
};

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值