首先使用如下的命令建立一個新的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.js中多頁面專案如何配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
