Vue.jsCLIの複数のページ

VueCLIプロジェクトで複数のページを作成する方法を理解するのに問題があります。現在、いくつかのコンポーネントを含むホームページがあり、別のページを作成したいのですが、その方法がわかりません。index.htmlがデフォルトである複数のhtmlファイルを作成することになっていますか？css js imgフォルダーとhtmlファイルをページとして持つ単純なファイル構造では、別のhtmlファイルを作成することは別のページを作成することを意味することを私は知っています。しかし、これがVueCLIプロジェクトでどのように機能するのかわかりません。

Vueのドキュメントでvue-routerや「pages」のようなものを見ましたが、よく理解していません。私の選択肢は何ですか？詳細は言うまでもなく、何も見つからなかったので、それを詳細に説明するガイドはありますか。あなたが助けることができれば非常に幸せになるでしょう！ありがとうございました！

まず、常に公式ドキュメントを読んでください。Vueを使用すると、SPAを構築でき、MPAも問題ありません。ガイドに従ってください：

• https://cli.vuejs.org/
• https://cli.vuejs.org/guide/html-and-static-assets.html#building-a-multi-page-app
• https://cli.vuejs.org/config/#pages

Vue CLI 3を使用して新しいプロジェクトを作成する必要があります。プロジェクトを作成したら、手動で構成するように設定します。SPAオプションを選択しないようにしてください。次に、Vueは、MPAアプローチを使用して優れた「開始」プロジェクトを作成します。その後、vue.config.jsで設定を繰り返します。

更新＃1

Vue Cliの一部の更新により、MPAアプリの構築方法が変更されたようです。

• 新しいアプリケーションを作成する vue create test
• 手動構成を選択します

作成されるボイラープレートはSPA用です。したがって、次の変更を加えます。

• src名前付きのフォルダを作成しますpages（オプション）

• このフォルダに、ホーム、バージョン情報などの独自のページを作成します。

• App.vueとmain.jsをsrcから新しいフォルダー（ホームなど）にコピーして貼り付けます。

• App.vue好みに合わせて、をこのフォルダにフォーマットします。

• vue.config.jsを作成し、次のように設定します。 https://cli.vuejs.org/config/#pages

以下に、これを示す3つの画像があります。

• 最初：新しいアプリ
• 2番目：これと同じアプリで、上記で変更を加えました
• 3番目：このアプリのvue.config.js

フォルダを作成する必要はありませんpages。これはアイデアを得るためだけのものです。

GitHubへのリンク： https://github.com/wandersonpjbkn/vue-mpa-application-example/tree/master

編集：Vueにはこれが組み込まれています。詳細については、一番下までスキップしてください。

元の答え：

あなたの質問を解釈し、したがってそれに答えるには2つの方法があります。

最初の解釈は、「同じ単一ページアプリ内の異なるページへのルーティングをサポートするにはどうすればよいですか？たとえば、localhost：8080 / aboutやlocalhost：8080 / reportなど」です。これに対する答えは、ルーターを使用することです。それはかなり簡単で、うまく機能します。

2番目の解釈は次のとおりです。「私のアプリは複雑で、複数の単一ページアプリケーションがあります。たとえば、「ウェブサイト」部分用の1つのアプリ、消費者がログインして作業するための1つのアプリ、管理者用の1つのアプリなどです。 3つの完全に別個のリポジトリを作成せずに、これを実行しますか？」

後者の答えは、複数のシングルページアプリを備えた単一のリポジトリです。このデモは、まさにあなたが求めているもののように見えます。

https://github.com/Plortinus/vue-multiple-pages/

特に見てください： https://github.com/Plortinus/vue-multiple-pages/blob/master/vue.config.js

更新された回答：

vuejsには複数のトップレベルページが組み込まれているという考えがあることがわかりました。つまり、それは理にかなっています。「いいえ、シングルページアプリ用です」という多くの間違った答えが出ているにもかかわらず、それは本当に一般的なことになるでしょう。

ファイルにpagesオプションが必要vue.config.jsです。

https://cli.vuejs.org/config/#pages

プロジェクトのルートディレクトリにそのファイルがない場合は、ファイルを作成すると、vuejsがそのファイルを検出します。

各ページを定義するには、長い方法と短い方法があります。ここでは短い形式を使用しました：

module.exports = {
  pages: {
    index: 'src/pages/index/main.ts',
    experiment: 'src/pages/experiment/main.ts'
  }
}

作品を「ページ」の下に置く必要はありません。「/src/apps/index/index.ts」などのいずれかです。

コードを移動し、いくつかのインポートを変更した後：

import HelloWorld from './components/HelloWorld'

に

import HelloWorld from '@/components/HelloWorld'

アプリは機能しますが、私のリポジトリの「実験」アプリは次のようにロードする必要がありました。

http://localhost:8080/experiment.html

かなり醜いですが、ルーターを使用しているため、次のようなURLになります。

http://localhost:8080/experiment.html/about

うーん。

幸いにも、 https://stackoverflow.com/a/52023187/963195それを解決しました。オプションvue.config.jsを含めるようにファイルを更新しdevServerます（これがエクスポートされたオブジェクトの最上位にあることを確認してください：

devServer: {
  historyApiFallback: {
    rewrites: [
      { from: /\/index/, to: '/index.html' },
      { from: /\/experiment/, to: '/experiment.html' }
    ]
  }
}

次に、router.tsファイルを変更して、追加のパス（私の場合は「experiment /」）を追加します。

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL + 'experiment/',
  ...

次に、URLは適切に解決されます。例： http://localhost:8080/experiment/about

これは質問とは関係がないかもしれませんが、私に耐えてください、多分私の答えは誰かを助けることができます。 私はwebpack + vueを使用しており、複数ページのアプリケーションを構築する方法を理解しました。ここに私のwebpack.config.js：

const path = require('path');
const fs = require('fs')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
    entry: {
        app: './src/app.js',
        mgmt: ['./src/modules/mgmt/mgmt.js'],
        login: './src/modules/login/login.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        // publicPath: '/ahezime/',
        filename: (chunkData) => {
            console.log('chuckData.chunk.name => ', chunkData.chunk.name)
            return chunkData.chunk.name === 'app' ? './[name].bundle.js' : './[name]/[name].bundle.js';
        }
    },
    optimization: {
        minimizer: [
            new TerserPlugin(),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new CleanWebpackPlugin(['dist']),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title: 'app',
            template: './src/app.html',
            // inject: false,
            chunks: ['app'],
            filename: './index.html'
        }),
        new HtmlWebpackPlugin({
            title: 'mgmt',
            template: './src/modules/mgmt/mgmt.html',
            // inject: false,
            chunks: ['mgmt'],
            filename: './mgmt/index.html'
        }),
        new HtmlWebpackPlugin({
            title: 'login',
            template: './src/modules/login/login.html',
            // inject: false,
            chunks: ['login'],
            filename: './login/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            }
        ],
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.scss?$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

そして、これが私のディレクトリ構造です：

https://i.stack.imgur.com/uFvKx.png

そして、あなたはページをジャンプすることができます：

<template>
    <div>
        <h1>App</h1>
        <div>
            <a href="./login">Please click me, and let take you into the login page!!!</a>
        </div>
        <span>Before computed: {{ message }} </span>
        <br>
        <span>Afer computed: {{ computedMessage() }} </span>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: 'Hello World!'
            }
        },
        computed: {
            reversedMessage: function() {
                return this.message.split('').reverse().join('')
            }
        },
        methods: {
            computedMessage: function() {
                return this.message.split('').reverse().join('')
            }
        }
    }
</script>