Home >Web Front-end >JS Tutorial >How to configure multi-page projects in Vue.js
First use the following command to create a new Vue.js project
vue init webpack vue-3
After opening the project using VsCode, enter the project on the command line, install the relevant dependent libraries, and then run the project , execute the following command
cd vue-3npm installnpm run dev
When everything is normal, enter http://localhost:8080 in the browser and a page with a big V icon should pop up.
After completing the above preparations, we will next implement the configuration of the multi-page project. The effects we expect to achieve are as follows:
Enter http:// in the browser localhost:8080/admin will jump to the page showing This is the administrator login.
We create the page/login directory in the src directory of the project
Then create three new folders under the login directory: admin.html admin.js Admin.vue
Then write the corresponding page display code, where the code in
admin.html is as follows
<!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>The code in Admin.vue is as follows
<template>
<p id="admin">
<p>这里是管理员登录页面</p>
</p></template><script>export default {
name: 'Admin'}</script>admin.js The code is as follows
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/>'})After the code for the page displayed above is completed, start the configuration work
First open the build directory
In webpack.base.conf.jsThe entry configuration property of the file plus the new entry file:
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js', admin: './src/page/login/admin.js'
},devServer in the webpack.dev.conf.js file Add redirection under 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') },
],
}, Also configure one more HtmlWebpackPlugin plug-in in the plugins configuration item in the file, use When generating the entry page
of admin.html, add chunks at the same time, which is used to specify the alias of the entry file corresponding to the previous 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
}),Then we find the config directory, open the index.js file inside, and add the following code under the build attribute
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),
admin: path.resolve(__dirname, '../dist/src/page/login/admin.html'), After completing all the configuration work, re-execute npm run dev on the command line. After the project is started, type http://localhost:8080/admin in the browser and the jump will be successful. Go to the page we just wrote.
First use the following command to create a new Vue.js project
vue init webpack vue-3
After opening the project using VsCode, enter the project on the command line, install the relevant dependent libraries, and then run the project , execute the following command
cd vue-3npm installnpm run dev
When everything is normal, enter http://localhost:8080 in the browser and a page with a big V icon should pop up.
After completing the above preparations, we will next implement the configuration of the multi-page project. The effects we expect to achieve are as follows:
Enter http:// in the browser localhost:8080/admin will jump to the page showing This is the administrator login.
We create the page/login directory in the src directory of the project
Then create three new folders under the login directory: admin.html admin.js Admin.vue
Then write the corresponding page display code, where the code in
admin.html is as follows
<!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>The code in Admin.vue is as follows
<template>
<p id="admin">
<p>这里是管理员登录页面</p>
</p></template><script>export default {
name: 'Admin'}</script>admin.js The code is as follows
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/>'})After the code for the page displayed above is completed, start the configuration work
First open the build directory
In webpack.base.conf.jsThe entry configuration property of the file plus the new entry file:
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js', admin: './src/page/login/admin.js'
},devServer in the webpack.dev.conf.js file Add redirection under 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') },
],
}, Also configure one more HtmlWebpackPlugin plug-in in the plugins configuration item in the file, use When generating the entry page
of admin.html, add chunks at the same time, which is used to specify the alias of the entry file corresponding to the previous 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
}),Then we find the config directory, open the index.js file inside, and add the following code under the build attribute
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),
admin: path.resolve(__dirname, '../dist/src/page/login/admin.html'), After completing all the configuration work, re-execute npm run dev on the command line. After the project is started, type http://localhost:8080/admin in the browser and the jump will be successful. Go to the page we just wrote.
Related recommendations:
Simple example of vue-cli developing multi-page applications
Vue-cli creates single page to multi-page Method example code
How to transform Vue-cli into a history mode that supports multiple pages
The above is the detailed content of How to configure multi-page projects in Vue.js. For more information, please follow other related articles on the PHP Chinese website!