vue项目添加多页面配置的步骤详解

针对“vue项目添加多页面配置的步骤详解”的完整攻略，以下是具体步骤：

1. 安装 `vue-cli`，并创建项目

首先，你需要在电脑上安装好 vue-cli，这里以 vue-cli 3.x 为例，使用如下命令进行安装：

npm install -g @vue/cli

安装完成后，可以使用 vue --version 检查一下是否成功安装。接着，使用 vue create 命令创建一个 Vue 项目：

vue create my-project

其中，my-project 为项目名称，可以根据实际情况修改。

2. 配置多页面

在使用 vue-cli 创建项目时，默认会生成一个单页面应用，如果需要使用多页面，需要将 vue.config.js 文件中的配置修改一下。在项目根目录下创建 vue.config.js 文件，并按照如下方式进行配置：

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/pages/index/main.js',
      // the source template
      template: 'src/pages/index/index.html',
      // output as dist/index.html
      filename: 'index.html',
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    about: {
      // entry for the page
      entry: 'src/pages/about/main.js',
      // the source template
      template: 'src/pages/about/about.html',
      // output as dist/about.html
      filename: 'about.html',
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'About Page',
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ['chunk-vendors', 'chunk-common', 'about']
    }
  }
}

以上代码为配置了两个页面的基本示例，一个是 index 页面，一个是 about 页面。其中，需要提前在项目中创建好对应的文件夹，比如上述代码中，创建了 src/pages/index 和 src/pages/about 文件夹。

同时需要注意的是，entry 为对应页面的入口文件，template 为对应页面的模板文件，filename 为对应页面生成的文件名，title 为对应页面的标题。

3. 创建多页面

以上配置好后，就可以在对应的页面目录下创建入口文件和模板文件了。以 index 页面为例，可以在 src/pages/index 目录下创建 main.js 和 index.html 文件：

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Index Page</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

about 页面同理。需要注意的是，这里的 id="app" 在每个页面中都应该写，否则页面将无法正常渲染。

4. 运行项目

完成以上所有步骤后，可以使用 npm run serve 命令启动项目。访问 http://localhost:8080/index.html 即可进入 index 页面，访问 http://localhost:8080/about.html 即可进入 about 页面。

以上为多页面配置的详细步骤。需要注意的是，如果需要添加更多页面，只需要根据以上示例的方式进行配置即可。同时也可以参考官方文档进行相关操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue项目添加多页面配置的步骤详解 - Python技术站

vue项目添加多页面配置的步骤详解

1. 安装 vue-cli，并创建项目

2. 配置多页面

3. 创建多页面

4. 运行项目

相关文章

1. 安装 `vue-cli`，并创建项目