vue.config.js多页配置
生活随笔
收集整理的這篇文章主要介紹了
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.npm_config_port || 8080; // dev portmodule.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.config.js多页配置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开源IM工程“蘑菇街TeamTalk”的
- 下一篇： npm发布包