vue-cli を使用して複数ページのアプリケーションを開発する簡単な例

プロジェクトを作成する

vue-cli を使用してプロジェクトを作成しますvue-cli 创建一个项目

$ vue init webpack vue-multiple-demo

根据控制台的提示，填写相关信息即可。创建完成后，进入该项目根目录并安装依赖。

$ cd vue-multiple-demo
$ npm install

由于是开发多页面应用，该工程就没有配置 vue-router。

最简示例

通过 vue-cli 创建的项目，默认是开发单页应用。如果希望开发多页面，需要调整部分脚本的配置。

入口

在 src 目录下新建一个 demo.js，为方便起见，直接将 main.js 中的内容复制过去。然后，修改 build/webpack.base.conf.js 的 entry 为多个。

entry: {
  app: './src/main.js',
  demo: './src/demo.js'
},

模板

在工程根目录下新建一个 demo.html 文件，同样将 index.html 的内容复制过去。为了区分开来，只编辑下 <title></title> 的内容。

<title>demo</title>

发布地址

在 config/index.js 的 build 配置下，新增一条记录。

index: path.resolve(__dirname, '../dist/index.html'),
demo: path.resolve(__dirname, '../dist/demo.html'),

生产环境配置

调整 build/webpack.prod.conf.js 的 plugins 中，关于 html 的配置。

修改

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  chunks: ['manifest', 'vendor', 'app']
}),

这里主要有两处改动

• filename 直接写死

• 为防止加载不必要的 js，添加 chunks 配置。

新增

new HtmlWebpackPlugin({
  filename: config.build.demo,
  template: 'demo.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  thunks: ['manifest', 'vendor', 'demo']
}),

预览效果

这里不启动本地服务，所以需要修改下静态资源的加载路径，即将 config/index.js 中 build->assetsPublicPath 修改为 ./。

assetsPublicPath: './',

构建应用

$ npm run build

直接打开 dist 目录中的 html 文件，即可预览效果。

小结

至此，开发多页面的最简示例就完成了。

进一步优化

实际开发中，页面的数量较多，因而需要批量处理以下配置。

文件目录

源码部分 src 的目录结构如下

• assets

• logo.png

• components

• HelloWorld.vue

• entries

• index.js

• list.js

• templates

• index.html

• list.html

按照约定

• entries 用于存放页面入口的 js 文件

• templates 用于存放页面的模板 html 文件

读取目录

为方便读取页面目录，这里使用 glob 扩展一个方法。

$ npm install glob --save-dev

安装完依赖后，在 build/utils.js 中添加方法

const glob = require('glob')

// 遍历指定目录下的文件
exports.getEntries = (dirPath) => {
  let filePaths = glob.sync(dirPath);
  let entries = {};
  filePaths.forEach(filePath => {
    let filename = filePath.match(/(\w+)\.[html|js]+/)[1];
    entries[filename] = filePath;
  })
  return entries;
}

修改配置

build/webpack.base.conf.js

entry: utils.getEntries('./src/entries/*.js'),

build/webpack.base.prod.conf.js

删除原有的 HtmlWebpackPlugin 相关配置，在文件结束之前遍历添加相关配置即可。

const pages = utils.getEntries('./src/templates/*.html');
for(let page in pages) {
  let fileConfig = {
    filename: path.resolve(__dirname, '../dist/pages/' + page + '.html'),
    template: pages[page],
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    thunks: ['manifest', 'vendor']
  };
  fileConfig.thunks.push(page);
  // 添加插件配置
  webpackConfig.plugins.push(new HtmlWebpackPlugin(fileConfig));
}

config/index.js

由于输出的地址不在这里配置，之前的删不删除都不影响。但是，调整了目录结构，页面中加载静态资源的路径也要做出调整。

assetsPublicPath: '../',

构建并预览

$ npm run build

构建完成后，直接使用浏览器打开 dist 目录下的 html 文件即可预览效果。

总结

简单总结以下，使用 vue-cli 开发多页面应用的几个关键点。

• 多入口

• 多个 HtmlWebpackPluginrrreee

  コンソールのプロンプトに従い、関連情報を入力します。作成後、プロジェクトのルート ディレクトリに移動し、依存関係をインストールします。
rrreee

マルチページ アプリケーションを開発しているため、このプロジェクトには vue-router が構成されていません。

• 最も単純な例
  vue-cli を通じて作成されたプロジェクトは、デフォルトでシングルページ アプリケーションを開発します。複数のページを開発する場合は、いくつかのスクリプトの構成を調整する必要があります。

入り口

便宜上、src ディレクトリに新しい demo.js を作成します。の内容をコピーします。次に、build/webpack.base.conf.js の entry を multiple に変更します。

rrreee

Template

プロジェクトのルート ディレクトリに新しい demo.html ファイルを作成し、index.html の内容もコピーします。それらを区別するには、<title></title> の内容のみを編集します。

rrreee

リリース アドレス

config/index.js の build 設定の下に新しいレコードを追加します。

rrreee

本番環境の構成

html の構成について、plugins の build/webpack.prod.conf.js を調整します。 変更

rrreeeここでは主な変更点が 2 つあります

filename 直接書き込みます

不要な js が読み込まれないようにするには、chunks 構成を追加します。



新しい

rrreee

プレビュー効果

🎜ローカルサービスはここでは開始されていないため、静的リソースの読み込みパス、つまりconfigを変更する必要がありますbuild->assetsPublicPath の /index.js が ./ に変更されます。 🎜rrreee🎜アプリケーションを構築する🎜rrreee🎜 dist ディレクトリ内の html ファイルを直接開いて、効果をプレビューします。 🎜

概要

🎜この時点で、複数のページを開発する最も単純な例が完成しました。 🎜🎜さらなる最適化🎜🎜実際の開発ではページ数が多いため、以下の設定をバッチ処理する必要があります。 🎜

ファイルディレクトリ

🎜ソースコード部分srcのディレクトリ構造は以下の通りです🎜
🎜🎜assets🎜🎜
🎜🎜logo.png🎜🎜🎜🎜🎜components🎜🎜
🎜🎜HelloWorld.vue🎜🎜🎜🎜🎜entries🎜🎜
🎜🎜index。 js🎜🎜🎜🎜 list.js🎜🎜🎜🎜🎜templates🎜🎜
🎜🎜index.html🎜🎜🎜🎜list .html🎜🎜🎜 🎜🎜契約に従って🎜
🎜🎜entries はページの js ファイルを保存するために使用されますエントリ🎜🎜🎜🎜templates ページの保存に使用されるテンプレート html ファイル🎜🎜🎜

読み取りディレクトリ

🎜 ページ ディレクトリの読み取りを容易にするには、glob が使用されています。 メソッドを拡張します。 🎜rrreee🎜依存関係をインストールした後、build/utils.js にメソッドを追加します🎜rrreee

構成の変更

build/webpack.base.conf.js

rrreee

build/webpack.base.prod.conf.js

🎜元の HtmlWebpackPlugin 関連の構成を削除し、ファイルの末尾の前に関連する構成をスキャンして追加します。 🎜rrreee

config/index.js

🎜ここでは出力アドレスが設定されていないため、以前の削除は影響しません。ただし、ディレクトリ構造を調整した後は、ページ内に静的リソースをロードするためのパスも調整する必要があります。 🎜rrreee

ビルドとプレビュー

rrreee🎜 構築が完了したら、ブラウザを直接使用して dist ディレクトリにある html ファイルを開いてプレビューします。効果。 🎜🎜概要🎜🎜 以下に、vue-cli を使用してマルチページ アプリケーションを開発する際のいくつかの重要なポイントを簡単にまとめます。 🎜
🎜🎜複数のエントリ🎜🎜🎜🎜複数の HtmlWebpackPlugin🎜🎜🎜🎜静的リソースのパス🎜🎜🎜🎜この記事で紹介されている構成は、すべての開発シナリオに適用できる必要があります。より多くの詳細を最適化するには、実際の開発において継続的な練習が必要です。 🎜🎜関連する推奨事項: 🎜🎜🎜vue は複数ページのアプリケーションを構築するサンプル コードの共有 🎜🎜🎜🎜 単一ページから複数のページへのサンプル コードを作成する Vue-cli メソッド 🎜🎜🎜🎜vue cli の再構築 マルチページ スキャフォールディングのサンプル共有 🎜🎜 🎜🎜🎜🎜🎜🎜

以上がvue-cli を使用して複数ページのアプリケーションを開発する簡単な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。