vue webpack multi-page construction example code page 3/3
Updated: September 11, 2018 14:32:05 Author: ccyinghua
This article mainly introduces the example code of vue webpack multi-page construction. The code is simple and easy to understand, very good, and has certain reference value. Friends who need it can refer to it
, //Template path
inject: true,
// excludeChunks allows skipping certain chunks, and chunks tells the plugin which entry to refer to
// How to better understand this? For example: For example, this demo contains two modules (index and about), the best thing is of course to introduce the js you need for each module.
// Instead of introducing all js to each page, you can remove the following excludeChunks, then npm run build, and then you will know by looking at the compiled sum
// filter: filter the data and then return the data that meets the requirements. It is to obtain each key in the JSON object
excludeChunks: (pages).filter(item => {
return (item != page)
}),
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// /kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}
// You need to generate several html files, and configure several HtmlWebpackPlugin objects
(new HtmlWebpackPlugin(conf))
}
(5) Modify config/
'use strict'
// Template version: 1.3.1
// see /webpack for documentation.
const path = require('path')
= {
dev: {
env: require('./'), // Introduce the current directory to indicate the development environment port: 3000, // The port number of dev-server can be changed by yourself autoOpenBrowser: true, // Whether to customize the browser // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// Below is the proxy table, which is used to build a virtual API server to proxy native requests, which can only be used in development mode proxyTable: {
"/demo/api":"http://localhost:8080"
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // /configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// /configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// /en/#cachebusting
cacheBusting: true,
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
// Whether to generate css and map files, the above paragraph means that there may be problems with using this cssmap, but according to experience, there is no big problem, you can use it cssSourceMap: false
},
build: {
env: require('./'), // Import the configuration file, just use it to specify the current environment // Template for
index: (__dirname, '../dist/'), // Splicing of relative paths // Paths
assetsRoot: (__dirname, '../dist'), // The root directory of the static resource is also the dist directory assetsSubDirectory: 'static', // subdirectory static of the root directory of the static resource, that is, the static below the dist directory assetsPublicPath: '/', // The public path of the static resource, that is, the real reference path /**
* Source Maps
*/
productionSourceMap: true, // When changing to false, the map debug file will not appear when running. ;Whether to generate a production environment's source map? The source map is used to debug the compiled files and is implemented by mapping to the pre-compilation files. // /configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false, // Whether to compress the code in a production environment, if you want to compress, you must install compression-webpack-plugin productionGzipExtensions: ['js', 'css'], // Define what types of files to compress // Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
// The following is a report used to enable the compilation completed. You can turn on or off by setting the values to true and false. // The following .npm_config_report represents a defined npm_config_report environment variable, which can be set by yourself bundleAnalyzerReport: .npm_config_report
}
}
assetsRoot: After executing npm run build, in which directory does the file generated by the project be placed in. The files generated by vue are all static files, which can be placed in nginx or in the resources/static directory of Spring Boot project.
assetsPublicPath: The root path of the project. Note that this property is available in both build and dev environments. When modifying, it should be modified two places at the same time.
port: This is changed to 3000, which is the port that webpack-dev-server runs during development.
proxyTable: This property is used to forward the request to the specified address. The configuration here means forwarding all requests starting with /demo/api tohttp://localhost:8080address.
5. Create a page
index/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>index</title> </head> <body> <div ></div> </body> </html>
index/
import Vue from 'vue'
import IndexView from './'
import router from './router'
// import VueResource from 'vue-resource'; // Before using npm install vue-resource --save download vue-resource// (VueResource);
new Vue({
el: '#app',
router,
render: h => h(IndexView)
});
index/
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
index/router/
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/'
(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
index/components/
<template>
<div>
Hello {{ name }}
</div>
</template>
<script>
export default {
data(){
return {
name: "admin"
}
},
mounted(){
//this.$("/demo/api/userinfo").then(resp =>{
// = ;
//});
}
}
</script>
<style>
</style>
login/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>login</title> </head> <body> <div ></div> </body> </html>
login/
import Vue from 'vue'
import LoginView from './'
// import VueResource from 'vue-resource';
// (VueResource);
new Vue({
el: '#app',
render: h => h(LoginView)
})
login/
<template>
<div>
<form >
<label for="username">username：</label>
<input type="text" name="username">
<br>
<label for="password">password：</label>
<input type="password" name="password"><br>
<br>
<button @="submit">Log in</button>
</form>
</div>
</template>
<script>
export default {
methods:{
submit(){
= "/demo/";
//let formData = new FormData(("login-form"));
//this.$("/demo/api/login", formData).then(resp => {
// if ( === 200){
// = "/";
// }else {
// alert();
// }
//})
}
}
}
</script>
<style>
</style>
6. Operation
http://localhost:3000/
http://localhost:3000/
Summarize
The above is the example code of vue webpack multi-page construction introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
Previous page123Read the full text