vue-cli创建的项目,配置多页面的实现方法-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

vue-cli创建的项目,配置多页面的实现方法

亚连

May 30, 2018 am 10:30 AM

vue-cli Konfigurasi

下面我就为大家分享一篇vue-cli创建的项目,配置多页面的实现方法，具有很好的参考价值，希望对大家有所帮助。

vue官方提供的命令行工具vue-cli，能够快速搭建单页应用。默认一个页面入口index.html，那么，如果我们需要多页面该如何配置，实际上也不复杂

假设要新建的页面是rule，以下以rule为例

创建新的html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title></title>
	</head>
	<body>
		<span style="color:#000000;"><p id="rule"></p></span>
		<!-- built files will be auto injected -->
	</body>
</html>

Salin selepas log masuk

创建入口文件Rule.vue和rule.js，仿照App.vue和main.js

<template>
	<p id="rule">
		<router-view></router-view>
	</p>
</template>
<script>
	export default {
		name: &#39;lottery&#39;,
		data() {
			return {
			}
		},
		mounted: function() {
			
			this.$router.replace({
					path:&#39;/rule&#39;
			});
		},
	}
</script>
<style lang="less">
	body{
		margin:0;
		padding:0;
	}
</style>

Salin selepas log masuk

rule.js

import Vue from &#39;vue&#39;
import Rule from &#39;./Rule.vue&#39;
import router from &#39;./router&#39;
import $ from &#39;jquery&#39;
//import vConsole from &#39;vconsole&#39;
import fastclick from &#39;fastclick&#39;
Vue.config.productionTip = false
fastclick.attach(document.body)
Vue.config.productionTip = false;
 
/* eslint-disable no-new */
new Vue({
 el: &#39;#rule&#39;,
 router,
 template: &#39;<Rule/>&#39;,
 components: { Rule },
})

Salin selepas log masuk

修改config/index.js

build添加rule地址，即编译后生成的rule.html的地址和名字

build: {
  // Template for index.html
  index: path.resolve(__dirname, &#39;../dist/index.php&#39;),
  rule: path.resolve(__dirname, &#39;../dist/rule.php&#39;),
  ……
 }

Salin selepas log masuk

rule: path.resolve(__dirname, '../dist/rule.php')表示编译后再dist文件下，rule.html编译后文件名为rule.php

修改build/webpack.base.conf.js

配置entry

entry: {
  app: &#39;./src/main.js&#39;,  
  rule: &#39;./src/rule.js&#39;
 },

Salin selepas log masuk

修改build/webpack.dev.conf.js

在plugins增加

new HtmlWebpackPlugin({ 
   filename: &#39;rule.html&#39;, 
   template: &#39;rule.html&#39;, 
   inject: true, 
   chunks:[&#39;rule&#39;] 
  }),

Salin selepas log masuk

修改build/webpack.prod.conf.js

在plugins增加

new HtmlWebpackPlugin({
   filename: config.build.rule,
   template: &#39;rule.html&#39;,
   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: &#39;dependency&#39;,
   chunks: [&#39;manifest&#39;,&#39;vendor&#39;,&#39;rule&#39;]
  }),

Salin selepas log masuk

以上全部

当后台地址跳转到你的新建的页面后，由于现在配置的默认路由是公用的，可自己配置多个路由文件，分别引用。

可在Rule.vue中路由跳转到指定路由，以实现页面控制

mounted: function() {
			
	this.$router.replace({
		path:&#39;/rule&#39;
	});
},

Salin selepas log masuk

上面是我整理给大家的，希望今后会对大家有帮助。

基于vue1和vue2获取dom元素的方法

nodejs+mongodb aggregate级联查询操作示例

JS实现将链接生成二维码并转为图片的方法

Atas ialah kandungan terperinci vue-cli创建的项目,配置多页面的实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

Assassin's Creed Shadows - Cara Mencari Orang Panda

1 bulan yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7634

Tutorial CakePHP

1390

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

147

Tunjukkan Lagi

Related knowledge

Bagaimana untuk menyediakan konfigurasi Git dalam PyCharm Feb 20, 2024 am 09:47 AM

Tajuk: Cara mengkonfigurasi Git dengan betul dalam PyCharm Dalam pembangunan perisian moden, sistem kawalan versi ialah alat yang sangat penting, dan Git, sebagai salah satu sistem kawalan versi yang popular, menyediakan pembangun dengan fungsi yang berkuasa dan operasi yang fleksibel. Sebagai persekitaran pembangunan bersepadu Python yang berkuasa, PyCharm dilengkapi dengan sokongan untuk Git, membolehkan pembangun mengurus versi kod dengan lebih mudah. Artikel ini akan memperkenalkan cara mengkonfigurasi Git dengan betul dalam PyCharm untuk memudahkan pembangunan yang lebih baik semasa proses pembangunan.

Gabungan sempurna PyCharm dan PyTorch: langkah pemasangan dan konfigurasi terperinci Feb 21, 2024 pm 12:00 PM

PyCharm ialah persekitaran pembangunan bersepadu (IDE) yang berkuasa dan PyTorch ialah rangka kerja sumber terbuka yang popular dalam bidang pembelajaran mendalam. Dalam bidang pembelajaran mesin dan pembelajaran mendalam, menggunakan PyCharm dan PyTorch untuk pembangunan boleh meningkatkan kecekapan pembangunan dan kualiti kod. Artikel ini akan memperkenalkan secara terperinci cara memasang dan mengkonfigurasi PyTorch dalam PyCharm, dan melampirkan contoh kod khusus untuk membantu pembaca menggunakan fungsi berkuasa kedua-dua ini dengan lebih baik. Langkah 1: Pasang PyCharm dan Python

Prinsip kerja dan kaedah konfigurasi GDM dalam sistem Linux Mar 01, 2024 pm 06:36 PM

Tajuk: Prinsip kerja dan kaedah konfigurasi GDM dalam sistem Linux Dalam sistem pengendalian Linux, GDM (GNOMEDisplayManager) ialah pengurus paparan biasa yang digunakan untuk mengawal log masuk antara muka pengguna grafik (GUI) dan pengurusan sesi pengguna. Artikel ini akan memperkenalkan prinsip kerja dan kaedah konfigurasi GDM, serta menyediakan contoh kod khusus. 1. Prinsip kerja GDM GDM ialah pengurus paparan dalam persekitaran desktop GNOME Ia bertanggungjawab untuk memulakan pelayan X dan menyediakan antara muka log masuk

Fahami Linux Bashrc: fungsi, konfigurasi dan penggunaan Mar 20, 2024 pm 03:30 PM

Memahami Linux Bashrc: Fungsi, Konfigurasi dan Penggunaan Dalam sistem Linux, Bashrc (BourneAgainShellruncommands) ialah fail konfigurasi yang sangat penting, yang mengandungi pelbagai arahan dan tetapan yang dijalankan secara automatik apabila sistem dimulakan. Fail Bashrc biasanya terletak dalam direktori rumah pengguna dan merupakan fail tersembunyi Fungsinya adalah untuk menyesuaikan persekitaran Bashshell untuk pengguna. 1. Persekitaran tetapan fungsi Bashrc

Bagaimana untuk mengkonfigurasi kumpulan kerja dalam sistem win11 Feb 22, 2024 pm 09:50 PM

Cara mengkonfigurasi kumpulan kerja dalam Win11 Kumpulan kerja ialah cara untuk menyambungkan berbilang komputer dalam rangkaian kawasan setempat, yang membolehkan fail, pencetak dan sumber lain dikongsi antara komputer. Dalam sistem Win11, mengkonfigurasi kumpulan kerja adalah sangat mudah, cuma ikut langkah di bawah. Langkah 1: Buka aplikasi "Tetapan" Pertama, klik butang "Mula" sistem Win11, dan kemudian pilih aplikasi "Tetapan" dalam menu timbul. Anda juga boleh menggunakan pintasan "Win+I" untuk membuka "Tetapan". Langkah 2: Pilih "Sistem" Dalam apl Tetapan, anda akan melihat berbilang pilihan. Sila klik pilihan "Sistem" untuk memasuki halaman tetapan sistem. Langkah 3: Pilih "Perihal" Dalam halaman tetapan "Sistem", anda akan melihat berbilang sub-pilihan. Sila klik

Elakkan kesilapan biasa dalam konfigurasi persekitaran Maven: Selesaikan masalah konfigurasi Feb 19, 2024 pm 04:56 PM

Maven ialah alat pengurusan dan binaan projek Java yang digunakan secara meluas dalam pembangunan projek Java. Dalam proses menggunakan Maven untuk membina projek, anda sering menghadapi beberapa isu konfigurasi persekitaran biasa. Artikel ini akan menjawab soalan lazim ini dan menyediakan contoh kod khusus untuk membantu pembaca mengelakkan ralat konfigurasi biasa. 1. Ralat konfigurasi pembolehubah persekitaran Maven Penerangan masalah: Apabila menggunakan Maven, jika konfigurasi pembolehubah persekitaran tidak betul, Maven mungkin tidak berfungsi dengan betul. Penyelesaian: Pastikan

Tutorial Git konfigurasi PyCharm yang ringkas dan mudah difahami Feb 20, 2024 am 08:28 AM

PyCharm ialah persekitaran pembangunan bersepadu (IDE) yang biasa digunakan Dalam pembangunan harian, menggunakan Git untuk mengurus kod adalah penting. Artikel ini akan memperkenalkan cara mengkonfigurasi Git dalam PyCharm dan menggunakan Git untuk pengurusan kod, dengan contoh kod khusus. Langkah 1: Pasang Git Pertama, pastikan Git dipasang pada komputer anda. Jika ia tidak dipasang, anda boleh pergi ke [tapak web rasmi Git](https://git-scm.com/) untuk memuat turun dan memasang versi terkini Git

Bagaimana untuk mengkonfigurasi dan memasang FTPS dalam sistem Linux Mar 20, 2024 pm 02:03 PM

Tajuk: Cara mengkonfigurasi dan memasang FTPS dalam sistem Linux, contoh kod khusus diperlukan Dalam sistem Linux, FTPS ialah protokol pemindahan fail yang selamat Berbanding dengan FTP, FTPS menyulitkan data yang dihantar melalui protokol TLS/SSL, yang menambah baik. Keselamatan penghantaran data. Dalam artikel ini, kami akan memperkenalkan cara mengkonfigurasi dan memasang FTPS dalam sistem Linux dan memberikan contoh kod khusus. Langkah 1: Pasang vsftpd Buka terminal dan masukkan arahan berikut untuk memasang vsftpd: sudo

See all articles