vue.config.js多页配置

vue.config.js多页配置，具体看代码："use strict";const path = require("path");var webpack = require("webpack");function resolve(dir) {return path.join(__dirname, dir);}const port = process.env.port || process.env

马优晨

7031人浏览 · 2020-06-12 16:25:05

马优晨 · 2020-06-12 16:25:05 发布

vue.config.js多页配置，具体看代码：

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

const port = process.env.port || process.env.npm_config_port || 8080; // dev port

module.exports = {
  publicPath: "/download",  //静态目录的地址
  outputDir: "../../../public/download", // 构建输出目录
  assetsDir: "static",
  productionSourceMap: false,
  devServer: {
    port: 3001,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      "/api": {
        target: "http://mayouchen.meili.com/",  //这里换成你的代理
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        },
        cookieDomainRewrite: {
          "*": "localhost"
        }
      }
    }
    //after: require('./mock/mock-server.js')
  },
  configureWebpack: {
    resolve: {
      alias: {
        $: "jquery",
        jquery: "jquery",
        "@": resolve("src"),
        "~": process.cwd(),
        public: resolve("public"),
        components: resolve("src/components"),
        util: resolve("src/utils"),
        store: resolve("src/store"),
        router: resolve("src/router")
      }
    }
  },
  pages: {
  //（1）输出一个页面
    //  main: {
    //    entry: 'src/main.js',
    //    template: 'public/index.html',
    //    filename: 'maker.html',
    //    chunks: ['chunk-vendors', 'chunk-common', 'index']
    //  },
  //（2）输出多个页面
    mod1: {
      template: "public/index.html",
      entry: "src/main.js",
      filename: "123.html",
      title: "222",
      keywords: "333",
      description: "444",
    },
    mod2: {
      template: "public/index.html",
      entry: "src/main.js",
      filename: "345.html",
      title: "222",
      keywords: "333",
      description: "444",
    }
  },

  chainWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      config.optimization.splitChunks = {};
      // 清除css，js版本号
      config.output.filename("static/js/[name].js").end();
      config.output.chunkFilename("static/js/[name].js").end();
      // 为生产环境修改配置...
      config.plugin("extract-css").tap(args => [
        {
          filename: `static/css/[name].css`,
          chunkFilename: `static/css/[name].css`
        }
      ]);
      config.plugin("provide").use(webpack.ProvidePlugin, [
        {
          $: "jquery",
          jquery: "jquery",
          "window.jQuery": "jquery"
        }
      ]);
    }
  }
};

多页或者单页配置 pages 选项，就可以了。

页面还可以获得修改的title keywords 和 description等等

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=1,viewport-fit=cover" />
  <title>垃圾APP</title>
  <link rel="Shortcut Icon" href="https://xxx/favicon.ico" />
  <meta name="keywords" content="<%=htmlWebpackPlugin.options.keywords %>" />
  <meta name="description" content="<%=htmlWebpackPlugin.options.description %>" />
</head>

<body>
  <noscript>
    <strong>测试 测试</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="xxx/js/jquery-1.9.1.min.js"></script>
  <script src="xxx/js/weixin.js"></script>

  <script>
    var uid = [];
  </script>
</body>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^