Operation and Maintenance
Linux Operation and Maintenance
Vue cli refactoring multi-page scaffolding example sharing
Vue cli refactoring multi-page scaffolding example sharing
The officially provided project generation tool vue-cli does not support multi-page webApp, but in actual projects, we need such scaffolding. We refer to many experts’ methods. This article provides a single-page version of mine. The solution to convert scaffolding into multi-page scaffolding is for your reference. Please correct me if I have any bad points.
Preparation
Use vue-cli to generate a single-page project scaffolding you need, and then we will start our modification project.
Reconstruction process
Step 1 Change the directory structure
step1 Create a new views folder under the src directory, and then create a new index under the views folder Folder
#step2 Move main.js and App.vue in the src directory to the index folder in step1, and rename main.js to index.js
step3 Move the router folder in the src directory to the index folder in step1. If you don’t use router, you can comment it out in index.js. I don’t use it because every time I use it, This page is not a single-page application, so there is no need to use the routing function
-
step4 Move the index.html file in the root directory to the index folder in step1
Step 2 Modify the configuration file under build
In the production environment, unique js files will be packaged into pages and public js will be extracted. Everything will not be packaged into one lump. The file directory structure after packaging is also relatively clear. All modifications are in the build folder
step1 Modify utils.js and add two functions, one is used to obtain multiple entries for the page, and the other is used to input the packaged page and inject js:
var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(__dirname, '../src/views')
var merge = require('webpack-merge')
//多入口配置
//获取views文件夹下，每个页面下的index.js作为页面入口，故每个页面下都必须有index.js
exports.entries = function() {
var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
var map = {}, tmp = [], pathname = '';
entryFiles.forEach((filePath) => {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
tmp = filePath.split('/').splice(-4)
map[tmp[2] + '/' + filename] = filePath
})
return map
}
//多页面输出配置
//读取views文件夹下的对应每个页面的html后缀文件，然后放入数组中
//如果想要更深的定制或者修改，建议大家看一下CommonsChunkPlugin
//推荐一个基础的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
let arr = []
entryHtml.forEach((filePath) => {
let jsPath = '', tmp = [];
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
tmp = filePath.split('/').splice(-4)
jsPath = tmp[2] + '/' + 'index'
let conf = {
template: filePath,
filename: filename + '.html',
chunks: ['manifest', 'vendors', jsPath],
inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf, {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}
step2 修改webpack.base.conf.js文件配置的入口
// entry: {
// app: './src/main.js'
// },
entry: utils.entries(),
step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码，将其注释掉：
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),Add our above method after the plugins attribute value, the following is the code snippet:
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
new FriendlyErrorsPlugin()
].concat(utils.htmlPlugin())
step4 修改webpack.prod.conf.js 找到下面的代码，注释掉：
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
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: 'dependency'
}),Add our above method after the plugins attribute value, the following is the code Snippet:
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}])
].concat(utils.htmlPlugin())Configuration completed. Just start the project normally.
Related recommendations:
How to transform Vue-cli into a history mode that supports multiple pages
webpack builds react multi Page
Sample code analysis of multi-page crawler in nodejs
The above is the detailed content of Vue cli refactoring multi-page scaffolding example sharing. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to share Quark Netdisk to Baidu Netdisk?
Mar 14, 2024 pm 04:40 PM
Quark Netdisk and Baidu Netdisk are very convenient storage tools. Many users are asking whether these two softwares are interoperable? How to share Quark Netdisk to Baidu Netdisk? Let this site introduce to users in detail how to save Quark network disk files to Baidu network disk. How to save files from Quark Network Disk to Baidu Network Disk Method 1. If you want to know how to transfer files from Quark Network Disk to Baidu Network Disk, first download the files that need to be saved on Quark Network Disk, and then open the Baidu Network Disk client. , select the folder where the compressed file is to be saved, and double-click to open the folder. 2. After opening the folder, click "Upload" in the upper left corner of the window. 3. Find the compressed file that needs to be uploaded on your computer and click to select it.
How to share NetEase Cloud Music to WeChat Moments_Tutorial on sharing NetEase Cloud Music to WeChat Moments
Mar 25, 2024 am 11:41 AM
1. First, we enter NetEase Cloud Music, and then click on the software homepage interface to enter the song playback interface. 2. Then in the song playback interface, find the sharing function button in the upper right corner, as shown in the red box in the figure below, click to select the sharing channel; in the sharing channel, click the "Share to" option at the bottom, and then select the first "WeChat Moments" allows you to share content to WeChat Moments.
How to share files with friends on Baidu Netdisk
Mar 25, 2024 pm 06:52 PM
Recently, Baidu Netdisk Android client has ushered in a new version 8.0.0. This version not only brings many changes, but also adds many practical functions. Among them, the most eye-catching is the enhancement of the folder sharing function. Now, users can easily invite friends to join and share important files in work and life, achieving more convenient collaboration and sharing. So how do you share the files you need to share with your friends? Below, the editor of this site will give you a detailed introduction. I hope it can help you! 1) Open Baidu Cloud APP, first click to select the relevant folder on the homepage, and then click the [...] icon in the upper right corner of the interface; (as shown below) 2) Then click [+] in the "Shared Members" column 】, and finally check all
How to share wifi hotspot in win7 system
Jul 01, 2023 pm 01:53 PM
How to share wifi hotspot in win7 system? After our computer is connected to the network, it can also share the wireless network. Many users want to share their computer's network to their mobile phones for use. Many friends don’t know how to operate in detail. The editor below has compiled the steps on how to share wifi hotspots in win7 system. If you are interested, follow the editor and read on! Steps on how to share wifi hotspot in win7 system 1. In order to turn on wifi hotspot, you must first have a wireless network card. The laptop comes with it. If you have a PC, you can buy a portable wifi to share wifi, which will not be described here. First press the windows key on the keyboard to open the start menu
Mango tv member account sharing 2023
Feb 07, 2024 pm 02:27 PM
Mango TV has various types of movies, TV series, variety shows and other resources, and users can freely choose to watch them. Mango TV members can not only watch all VIP dramas, but also set the highest definition picture quality to help users watch dramas happily. Below, the editor will bring you some free Mango TV membership accounts for users to use, hurry up and take a look Take a look. Mango TV latest member account free sharing 2023: Note: These are the latest member accounts collected, you can log in directly and use them, do not change the password at will. Account number: 13842025699 Password: qds373 Account number: 15804882888 Password: evr6982 Account number: 13330925667 Password: jgqae Account number: 1703
What are the activation keys for win7 enterprise edition?
Jul 09, 2023 pm 03:01 PM
Do you have the latest activation key for win7 enterprise edition? If you install the official win7 enterprise version, you will be prompted to activate it with the windows7 enterprise product key, otherwise it will not work properly. So the editor will share with you some win7 enterprise version activation passwords, let's take a look. Q3VMJ-TMJ3M-99RF9-CVPJ3-Q7VF3KGMPT-GQ6XF-DM3VM-HW6PR-DX9G8MT39G-9HYXX-J3V3Q-RPXJB-RQ6D79JBBV-7Q7P7-CTDB7-KYBKG-X8HHCP72QK-2Y3B8-YDHDV-29DQB-QKWWM6 JQ
Share two installation methods for HP printer drivers
Mar 13, 2024 pm 05:16 PM
HP printers are essential printing equipment in many offices. Installing the printer driver on the computer can perfectly solve problems such as the printer being unable to connect. So how to install HP printer driver? The editor below will introduce you to two HP printer driver installation methods. The first method: download the driver from the official website 1. Search the HP China official website in the search engine, and in the support column, select [Software and Drivers]. 2. Select the [Printer] category, enter your printer model in the search box, and click [Submit] to find your printer driver. 3. Select the corresponding printer according to your computer system. For win10, select the driver for win10 system. 4. After downloading successfully, find it in the folder
How to share Tomato novel link
Feb 27, 2024 pm 04:20 PM
Tomato Novels is a rich treasure house of novels, which gathers a large number of high-quality novel resources. Here, you can choose your favorite novels from many different types of novels according to your preferences. For those of you who love reading, this is undoubtedly a literary world where you can fly freely. Sometimes when you encounter your favorite reading material, it’s like sharing it with friends to read together, but many users don’t know exactly how to share it, so this tutorial guide will bring you a detailed introduction to the guide, for players who want to know more Come and read along with this article! How to share Tomato novels with friends? 1. Open Tomato Novel, click to enter the novel, and click the share icon in the upper right corner. 2. Select the sharing channel. Here I take sharing to WeChat friends as an example. 3. Click Share. 4. You can check
