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;),

登入後複製

以上完成所有的設定工作，在命令列重新執行npm run dev ，專案啟動後，在瀏覽器鍵入http://localhost:8080/admin ，就成功的跳到剛剛我們寫的頁面去了。

熱AI工具

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1323

PHP教程

1272

C# 教程

1251

Related knowledge

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：選擇「關於」在「系統」設定頁面中，你會看到多個子選項。請點

Linux系統中如何設定和安裝FTPS Mar 20, 2024 pm 02:03 PM

標題：Linux系統中如何配置和安裝FTPS，需要具體程式碼範例在Linux系統中，FTPS是一種安全的檔案傳輸協議，與FTP相比，FTPS透過TLS/SSL協議對傳輸的資料進行加密，提高了資料傳輸的安全性。在本文中，將介紹如何在Linux系統中設定和安裝FTPS，並提供特定的程式碼範例。步驟一：安裝vsftpd開啟終端，輸入以下指令安裝vsftpd：sudo

CentOS7系統安裝與設定 DRBD？實現高可用性和資料冗餘教程！ Feb 22, 2024 pm 02:13 PM

DRBD（DistributedReplicatedBlockDevice）是一種用於實現資料冗餘和高可用性的開源解決方案。以下是在CentOS7系統上安裝和設定DRBD的教學：安裝DRBD：開啟終端機並以管理員身分登入CentOS7系統。執行以下命令以安裝DRBD軟體包：sudoyuminstalldrbd配置DRBD：編輯DRBD設定檔（通常位於/etc/drbd.d目錄下），配置DRBD資源的設定。例如，可以定義主節點和備份節點的IP位址、連接埠和設備等。確保主節點和備份節點之間可以透過網

MyBatis Generator配置參數解讀及最佳實踐 Feb 23, 2024 am 09:51 AM

MyBatisGenerator是MyBatis官方提供的程式碼產生工具，可以幫助開發人員快速產生符合資料庫表結構的JavaBean、Mapper介面以及XML映射檔。在使用MyBatisGenerator進行程式碼產生的過程中，配置參數的設定是至關重要的。本文將從配置參數的角度出發，深入探討MyBatisGenerator的

win11電腦配置在哪裡看？ win11電腦設定資訊怎麼找方法 Mar 06, 2024 am 10:10 AM

我們在使用win11系統的時候有時候會需要查看自己的電腦配置，但是也有不少的用戶們在詢問win11電腦配置在哪裡看？其實方法很簡單的，使用者可以直接的開啟設定下的系統訊息，然後就能查看電腦設定資訊。以下就讓本站來為使用者來仔細的介紹一下win11電腦設定資訊如何查找方法吧。 win11電腦設定資訊如何找出方法方法一：1、點選開始，開啟電腦設定。 3、在此頁面即可查看電腦設定資訊。 2.在指令提示字元視窗中，輸入systeminfo回車，即可查看電腦設定。

詳細教學：如何在PyCharm中設定環境變量 Feb 24, 2024 pm 03:45 PM

PyCharm是一款功能強大的Python整合開發環境，讓開發者更有效率地編寫、偵錯和管理Python程式碼。在日常開發過程中，經常會遇到需要配置環境變數的情況，以便程式能夠正確地存取所需的資源。本文將詳細介紹如何在PyCharm中設定環境變量，同時提供具體的程式碼範例。 1.配置PyCharm的環境變數在PyCharm中配置環境變數非常簡單，以下是具體步驟：

See all articles

Vue.js中多頁面專案如何配置

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題