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: 'Admin'}</script>admin.js 中的代码如下
import Vue from 'vue'import Admin from './Admin.vue'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
el: '#admin',
components: { Admin },
template: '<Admin/>'})上面显示页面的代码完成之后，开始进行配置工作
首先打开 build目录
在 webpack.base.conf.js文件的 entry 配置属性加上新的入口文件：
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js', admin: './src/page/login/admin.js'
},在webpack.dev.conf.js文件的devServer下的 rewrites添加重定向：
devServer: { clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, 'src/indexlogin/admin.html') }, { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},同样要在该文件中的plugins配置项内多配置一个HtmlWebpackPlugin插件，用于生成 admin.html 的入口页
同时添加 chunks ，用于指定在前面 entry对应的入口文件的别名。
plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env')
}), 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: 'index.html', template: 'index.html', chunks:['app'], inject: true
}), new HtmlWebpackPlugin({ filename: 'src/page/login/admin.html', template: 'src/page/login/admin.html', chunks:['admin'], inject: true
}),然后我们找到 config 目录，打开里面的 index.js 文件，在build属性下添加如下代码
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),
admin: path.resolve(__dirname, '../dist/src/page/login/admin.html'),以上完成所有的配置工作，在命令行重新执行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: 'Admin'}</script>admin.js 中的代码如下
import Vue from 'vue'import Admin from './Admin.vue'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
el: '#admin',
components: { Admin },
template: '<Admin/>'})上面显示页面的代码完成之后，开始进行配置工作
首先打开 build目录
在 webpack.base.conf.js文件的 entry 配置属性加上新的入口文件：
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js', admin: './src/page/login/admin.js'
},在webpack.dev.conf.js文件的devServer下的 rewrites添加重定向：
devServer: { clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, 'src/indexlogin/admin.html') }, { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},同样要在该文件中的plugins配置项内多配置一个HtmlWebpackPlugin插件，用于生成 admin.html 的入口页
同时添加 chunks ，用于指定在前面 entry对应的入口文件的别名。
plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env')
}), 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: 'index.html', template: 'index.html', chunks:['app'], inject: true
}), new HtmlWebpackPlugin({ filename: 'src/page/login/admin.html', template: 'src/page/login/admin.html', chunks:['admin'], inject: true
}),然后我们找到 config 目录，打开里面的 index.js 文件，在build属性下添加如下代码
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),
admin: path.resolve(__dirname, '../dist/src/page/login/admin.html'),以上完成所有的配置工作，在命令行重新执行npm run dev ，项目启动后，在浏览器键入 http://localhost:8080/admin ，就成功的跳转到刚刚我们写的页面中去了。
相关推荐：
如何将 Vue-cli 改造成支持多页面的history模式
Atas ialah kandungan terperinci Vue.js中多页面项目如何配置. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
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)
Topik panas
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
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
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
Pentafsiran parameter konfigurasi MyBatis Generator dan amalan terbaik
Feb 23, 2024 am 09:51 AM
MyBatisGenerator ialah alat penjanaan kod yang disediakan secara rasmi oleh MyBatis, yang boleh membantu pembangun menjana JavaBeans, antara muka Mapper dan fail pemetaan XML dengan pantas yang mematuhi struktur jadual pangkalan data. Dalam proses menggunakan MyBatisGenerator untuk penjanaan kod, penetapan parameter konfigurasi adalah penting. Artikel ini akan bermula dari perspektif parameter konfigurasi dan meneroka secara mendalam fungsi MyBatisGenerator.
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
Tutorial pemasangan dan konfigurasi kelalang: alat untuk membina aplikasi web Python dengan mudah
Feb 20, 2024 pm 11:12 PM
Tutorial pemasangan dan konfigurasi kelalang: Alat untuk membina aplikasi Web Python dengan mudah, contoh kod khusus diperlukan Pengenalan: Dengan peningkatan populariti Python, pembangunan Web telah menjadi salah satu kemahiran yang diperlukan untuk pengaturcara Python. Untuk menjalankan pembangunan web dalam Python, kita perlu memilih rangka kerja web yang sesuai. Di antara banyak rangka kerja Web Python, Flask ialah rangka kerja yang ringkas, mudah digunakan dan fleksibel yang digemari oleh pembangun. Artikel ini akan memperkenalkan pemasangan rangka kerja Flask,
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
Binaan licin: Cara mengkonfigurasi alamat imej Maven dengan betul
Feb 20, 2024 pm 08:48 PM
Binaan licin: Cara mengkonfigurasi alamat imej Maven dengan betul Apabila menggunakan Maven untuk membina projek, adalah sangat penting untuk mengkonfigurasi alamat imej yang betul. Mengkonfigurasi alamat cermin dengan betul boleh mempercepatkan pembinaan projek dan mengelakkan masalah seperti kelewatan rangkaian. Artikel ini akan memperkenalkan cara mengkonfigurasi alamat cermin Maven dengan betul dan memberikan contoh kod tertentu. Mengapa anda perlu mengkonfigurasi alamat imej Maven ialah alat pengurusan projek yang boleh membina projek secara automatik, mengurus kebergantungan, menjana laporan, dsb. Apabila membina projek di Maven, biasanya
