vue.config.js 멀티 페이지 설정

vue.config.코드 보기:

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

여러 페이지나 한 페이지에 페이지 옵션을 설정하면 됩니다.
페이지에서 수정된 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="" />
  <meta name="description" content="" />
</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>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Qiita API v2를 Ajax에서 사용하기위한 webpack 설정 (로컬 개발 환경 전용)

에서는 Qiita의 기사 목록, 사용자 세부 정보, 기사를 '좋아요'한 사람 목록 및 재고가 있는 사람 목록을 검색할 수 있습니다. Qiita 화면에서 기사를 재고한 사람을 볼 수 없기 때문에 API를 통해 기사를 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

vue.config.js 멀티 페이지 설정

좋은 웹페이지 즐겨찾기