Vue.js中多页面项目如何配置-js教程-PHP中文网

首页

web前端

js教程

Vue.js中多页面项目如何配置

小云云

Mar 10, 2018 pm 03:33 PM

javascript vue.js 配置

首先使用如下的命令创建一个新的 Vue.js 项目

vue init webpack vue-3

登录后复制

使用 VsCode 打开项目之后，在命令行进入到项目中去，安装相关的依赖库，然后运行项目，执行下面的命令

cd vue-3npm installnpm run dev

登录后复制

在一切正常的情况下，在浏览器输入 http://localhost:8080 应该会弹出一个含有大大的 V 字图标的页面。

完成上面的准备工作之后，接下来我们就来实现多页面项目的配置，我们预期希望实现的效果如下：

在浏览器输入 http://localhost:8080/admin 就会跳转到显示 这里是管理员登录 的页面。

我们在项目的 src 目录下建立 page/login 目录
然后在 login 目录下新建三个文件夹： admin.html admin.js Admin.vue

然后编写相应的页面显示代码，其中
admin.html 中的代码如下

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录页面</title></head><body>
    <p id="admin"></p></body></html>

登录后复制

Admin.vue 中的代码如下

<template>
  <p id="admin">
      <p>这里是管理员登录页面</p>
  </p></template><script>export default {
  name: &#39;Admin&#39;}</script>

登录后复制

admin.js 中的代码如下

import Vue from &#39;vue&#39;import Admin from &#39;./Admin.vue&#39;Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: &#39;#admin&#39;,
  components: { Admin },
  template: &#39;<Admin/>&#39;})

登录后复制

上面显示页面的代码完成之后，开始进行配置工作

首先打开 build目录
在 webpack.base.conf.js文件的 entry 配置属性加上新的入口文件：

module.exports = {  context: path.resolve(__dirname, &#39;../&#39;),  entry: {    app: &#39;./src/main.js&#39;,    admin: &#39;./src/page/login/admin.js&#39;
  },

登录后复制

在webpack.dev.conf.js文件的devServer下的 rewrites添加重定向：

  devServer: {    clientLogLevel: &#39;warning&#39;,
    historyApiFallback: {
      rewrites: [
        { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, &#39;src/indexlogin/admin.html&#39;) },        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, &#39;index.html&#39;) },
      ],
    },

登录后复制

同样要在该文件中的plugins配置项内多配置一个HtmlWebpackPlugin插件，用于生成 admin.html 的入口页
同时添加 chunks ，用于指定在前面 entry对应的入口文件的别名。

  plugins: [    new webpack.DefinePlugin({      &#39;process.env&#39;: require(&#39;../config/dev.env&#39;)
    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: &#39;index.html&#39;,      template: &#39;index.html&#39;,      chunks:[&#39;app&#39;],      inject: true
    }),    new HtmlWebpackPlugin({      filename: &#39;src/page/login/admin.html&#39;,      template: &#39;src/page/login/admin.html&#39;,      chunks:[&#39;admin&#39;],      inject: true
    }),

登录后复制

然后我们找到 config 目录，打开里面的 index.js 文件，在build属性下添加如下代码

  build: {    // Template for index.html    index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
    admin: path.resolve(__dirname, &#39;../dist/src/page/login/admin.html&#39;),

登录后复制

以上完成所有的配置工作，在命令行重新执行npm run dev ，项目启动后，在浏览器键入 http://localhost:8080/admin ，就成功的跳转到刚刚我们写的页面中去了。

首先使用如下的命令创建一个新的 Vue.js 项目

vue init webpack vue-3

登录后复制

使用 VsCode 打开项目之后，在命令行进入到项目中去，安装相关的依赖库，然后运行项目，执行下面的命令

cd vue-3npm installnpm run dev

登录后复制

在一切正常的情况下，在浏览器输入 http://localhost:8080 应该会弹出一个含有大大的 V 字图标的页面。

完成上面的准备工作之后，接下来我们就来实现多页面项目的配置，我们预期希望实现的效果如下：

在浏览器输入 http://localhost:8080/admin 就会跳转到显示 这里是管理员登录 的页面。

我们在项目的 src 目录下建立 page/login 目录
然后在 login 目录下新建三个文件夹： admin.html admin.js Admin.vue

然后编写相应的页面显示代码，其中
admin.html 中的代码如下

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录页面</title></head><body>
    <p id="admin"></p></body></html>

登录后复制

Admin.vue 中的代码如下

<template>
  <p id="admin">
      <p>这里是管理员登录页面</p>
  </p></template><script>export default {
  name: &#39;Admin&#39;}</script>

登录后复制

admin.js 中的代码如下

import Vue from &#39;vue&#39;import Admin from &#39;./Admin.vue&#39;Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: &#39;#admin&#39;,
  components: { Admin },
  template: &#39;<Admin/>&#39;})

登录后复制

上面显示页面的代码完成之后，开始进行配置工作

首先打开 build目录
在 webpack.base.conf.js文件的 entry 配置属性加上新的入口文件：

module.exports = {  context: path.resolve(__dirname, &#39;../&#39;),  entry: {    app: &#39;./src/main.js&#39;,    admin: &#39;./src/page/login/admin.js&#39;
  },

登录后复制

在webpack.dev.conf.js文件的devServer下的 rewrites添加重定向：

  devServer: {    clientLogLevel: &#39;warning&#39;,
    historyApiFallback: {
      rewrites: [
        { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, &#39;src/indexlogin/admin.html&#39;) },        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, &#39;index.html&#39;) },
      ],
    },

登录后复制

  plugins: [    new webpack.DefinePlugin({      &#39;process.env&#39;: require(&#39;../config/dev.env&#39;)
    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: &#39;index.html&#39;,      template: &#39;index.html&#39;,      chunks:[&#39;app&#39;],      inject: true
    }),    new HtmlWebpackPlugin({      filename: &#39;src/page/login/admin.html&#39;,      template: &#39;src/page/login/admin.html&#39;,      chunks:[&#39;admin&#39;],      inject: true
    }),

登录后复制

然后我们找到 config 目录，打开里面的 index.js 文件，在build属性下添加如下代码

  build: {    // Template for index.html    index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
    admin: path.resolve(__dirname, &#39;../dist/src/page/login/admin.html&#39;),

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7460

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

PyCharm与PyTorch完美结合：安装配置步骤详解 Feb 21, 2024 pm 12:00 PM

PyCharm是一款强大的集成开发环境（IDE），而PyTorch是深度学习领域备受欢迎的开源框架。在机器学习和深度学习领域，使用PyCharm和PyTorch进行开发可以极大地提高开发效率和代码质量。本文将详细介绍如何在PyCharm中安装配置PyTorch，并附上具体的代码示例，帮助读者更好地利用这两者的强大功能。第一步：安装PyCharm和Python

Linux系统中GDM的工作原理及配置方法 Mar 01, 2024 pm 06:36 PM

标题：Linux系统中GDM的工作原理及配置方法在Linux操作系统中，GDM（GNOMEDisplayManager）是一种常见的显示管理器，用于控制图形用户界面（GUI）登录和用户会话管理。本文将介绍GDM的工作原理和配置方法，以及提供具体的代码示例。一、GDM的工作原理GDM是GNOME桌面环境下的显示管理器，负责启动X服务器并提供登录界面，用户输

了解Linux Bashrc：功能、配置与使用方法 Mar 20, 2024 pm 03:30 PM

了解LinuxBashrc：功能、配置与使用方法在Linux系统中，Bashrc（BourneAgainShellruncommands）是一个非常重要的配置文件，其中包含了系统启动时自动运行的各种命令和设置。Bashrc文件通常位于用户的家目录下，是一个隐藏文件，它的作用是为用户自定义设置Bashshell的环境。一、Bashrc的功能设置环境

win11系统如何配置工作组 Feb 22, 2024 pm 09:50 PM

Win11系统如何配置工作组工作组是一种在局域网中连接多台计算机的方式，它允许计算机之间共享文件、打印机和其他资源。在Win11系统中，配置工作组非常简单，只需按照以下步骤操作即可。步骤1：打开“设置”应用程序首先，点击Win11系统的“开始”按钮，然后在弹出的菜单中选择“设置”应用程序。你也可以使用快捷键“Win+I”打开“设置”。步骤2：选择“系统”在“设置”应用程序中，你会看到多个选项。请点击“系统”选项，进入系统设置页面。步骤3：选择“关于”在“系统”设置页面中，你会看到多个子选项。请点

MyBatis Generator配置参数解读及最佳实践 Feb 23, 2024 am 09:51 AM

MyBatisGenerator是MyBatis官方提供的一个代码生成工具，可以帮助开发人员快速生成符合数据库表结构的JavaBean、Mapper接口以及XML映射文件。在使用MyBatisGenerator进行代码生成的过程中，配置参数的设置是至关重要的。本文将从配置参数的角度出发，深入探讨MyBatisGenerator的

Linux系统中如何配置和安装FTPS Mar 20, 2024 pm 02:03 PM

标题：Linux系统中如何配置和安装FTPS，需要具体代码示例在Linux系统中，FTPS是一种安全的文件传输协议，与FTP相比，FTPS通过TLS/SSL协议对传输的数据进行加密，提高了数据传输的安全性。在本文中，将介绍如何在Linux系统中配置和安装FTPS，并提供具体的代码示例。步骤一：安装vsftpd打开终端，输入以下命令安装vsftpd：sudo

Flask安装配置教程：轻松搭建PythonWeb应用的利器 Feb 20, 2024 pm 11:12 PM

Flask安装配置教程：轻松搭建PythonWeb应用的利器，需要具体代码示例引言：随着Python的日益流行，Web开发也成为了Python程序员的必备技能之一。而要进行Python的Web开发，我们需要选择合适的Web框架。在众多的PythonWeb框架中，Flask是一款简洁、易上手且灵活的框架，备受开发者们的青睐。本文将介绍Flask框架的安装、

win11电脑配置在哪里看？win11电脑配置信息怎么查找方法 Mar 06, 2024 am 10:10 AM

我们在使用win11系统的时候有时候会需要查看自己的电脑配置，但是也有不少的用户们在询问win11电脑配置在哪里看？其实方法很简单的，用户们可以直接的打开设置下的系统信息，然后就能查看电脑配置信息。下面就让本站来为用户们来仔细的介绍一下win11电脑配置信息如何查找方法吧。win11电脑配置信息如何查找方法方法一：1、点击开始，打开电脑设置。3、在此页面即可查看电脑配置信息。2、在命令提示符窗口中，输入systeminfo回车，即可查看电脑配置。

See all articles

Vue.js中多页面项目如何配置

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题