web-dev-qa-db-ja.com

Vue.js CLIの複数ページ

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

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

javascripthtmlvue.jsvue-climulti-page-application
15
Martin Zahariev

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

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

＃1を更新

Vue Cliの更新により、MPAアプリのビルド方法が変更されたようです。

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

作成されたボイラープレートは、SPAのものになります。ただし、次の変更を行います。

  • srcという名前のpagesの下にフォルダーを作成します（オプション）

  • このフォルダに独自のページを作成します：Home、Aboutな​​ど。

  • SrcからApp.vueとmain.jsをコピーして、新しいフォルダー（ホームなど）に貼り付けます。
  • 好きなときに、App.vueをこのフォルダーにフォーマットします
  • Vue.config.jsを作成し、次のように設定します。 https://cli.vuejs.org/config/#pages

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

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

fresh new appthis same app, with the changes I made abovethe vue.config.js from this app

pagesフォルダーを作成する必要はありません。アイデアを得るだけです。

GitHubへのリンク： Building a MPA App

32
PJ.Wanderson

編集：Vueにはこのビルトインがあります。詳細については下にスキップしてください。

元の答え：

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

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

2番目の解釈は、「私のアプリは複雑で、複数のシングルページアプリケーションがあります。たとえば、「ウェブサイト」部分用の1つのアプリ、消費者用の1つのアプリ、仕事をする、管理者向けのアプリを1つなど-3つの完全に別個のリポジトリを作成せずに、どのようにvueできますか？」

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

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

特に次をご覧ください： https://github.com/Plortinus/vue-multiple-pages/blob/master/vue.config.js

更新された回答：

Vuejsには複数のトップレベルページが組み込まれているという考えがあります。つまり、それは理にかなっています-「いいえ、それは単一ページのアプリのためです」と多くの間違った答えが言っているにもかかわらず、それは本当に一般的です！

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

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

あー.

幸いなことに、 このstackoverflowの答え はそれを解決しました。 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

9
Andrew E

これは質問には関係ないかもしれませんが、私と一緒に耐えてください。おそらく私の答えが誰かを助けることができます。 私は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>
0
Ray's Life Thinking