vue webpack多頁面構(gòu)建的實(shí)例代碼

更新時(shí)間：2018年09月11日 14:32:05 作者：ccyinghua

這篇文章主要介紹了vue webpack多頁面構(gòu)建的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

, //模板路徑 inject: true, // excludeChunks 允許跳過某些chunks, 而chunks告訴插件要引用entry里面的哪幾個(gè)入口 // 如何更好的理解這塊呢？舉個(gè)例子：比如本demo中包含兩個(gè)模塊（index和about），最好的當(dāng)然是各個(gè)模塊引入自己所需的js， // 而不是每個(gè)頁面都引入所有的js，你可以把下面這個(gè)excludeChunks去掉，然后npm run build，然后看編譯出來的index.html和about.html就知道了 // filter：將數(shù)據(jù)過濾，然后返回符合要求的數(shù)據(jù)，Object.keys是獲取JSON對象中的每個(gè)key excludeChunks: Object.keys(pages).filter(item => { return (item != page) }), 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' } // 需要生成幾個(gè)html文件，就配置幾個(gè)HtmlWebpackPlugin對象 module.exports.plugins.push(new HtmlWebpackPlugin(conf)) }

(5)修改config/index.js

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
 dev: {
 env: require('./dev.env'), // 引入當(dāng)前目錄下的dev.env.js，用來指明開發(fā)環(huán)境
 port: 3000, // dev-server的端口號(hào)，可以自行更改
 autoOpenBrowser: true, // 是否自定代開瀏覽器
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 // 下面是代理表，作用是用來，建一個(gè)虛擬api服務(wù)器用來代理本機(jī)的請求，只能用于開發(fā)模式
 proxyTable: {
  "/demo/api":"http://localhost:8080"
 },
 // Various Dev Server settings
 host: 'localhost', // can be overwritten by process.env.HOST
 autoOpenBrowser: false,
 errorOverlay: true,
 notifyOnErrors: true,
 poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 /**
  * Source Maps
  */
 // https://webpack.js.org/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
 // https://vue-loader.vuejs.org/en/options.html#cachebusting
 cacheBusting: true,
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 // 是否生成css，map文件，上面這段英文就是說使用這個(gè)cssmap可能存在問題，但是按照經(jīng)驗(yàn)，問題不大，可以使用
 cssSourceMap: false
 },
 build: {
 env: require('./prod.env'), // 導(dǎo)入prod.env.js配置文件，只要用來指定當(dāng)前環(huán)境
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'), // 相對路徑的拼接
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'), // 靜態(tài)資源的根目錄 也就是dist目錄
 assetsSubDirectory: 'static', // 靜態(tài)資源根目錄的子目錄static，也就是dist目錄下面的static
 assetsPublicPath: '/', // 靜態(tài)資源的公開路徑，也就是真正的引用路徑
 /**
  * Source Maps
  */
 productionSourceMap: true, // 改成false運(yùn)行時(shí)不會(huì)出現(xiàn)map調(diào)試文件。;是否生成生產(chǎn)環(huán)境的sourcmap，sourcmap是用來debug編譯后文件的，通過映射到編譯前文件來實(shí)現(xiàn)
 // https://webpack.js.org/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, // 是否在生產(chǎn)環(huán)境中壓縮代碼，如果要壓縮必須安裝compression-webpack-plugin
 productionGzipExtensions: ['js', 'css'], // 定義要壓縮哪些類型的文件
 // 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
 // 下面是用來開啟編譯完成后的報(bào)告，可以通過設(shè)置值為true和false來開啟或關(guān)閉
 // 下面的process.env.npm_config_report表示定義的一個(gè)npm_config_report環(huán)境變量，可以自行設(shè)置
 bundleAnalyzerReport: process.env.npm_config_report
 }
}

assetsRoot：執(zhí)行npm run build之后，項(xiàng)目生成的文件放到哪個(gè)目錄中。vue生成的文件都是靜態(tài)文件，可以放在nginx中，也可以放到Spring Boot項(xiàng)目的resources/static目錄中。
assetsPublicPath：項(xiàng)目的根路徑。注意，這個(gè)屬性在build、dev兩個(gè)環(huán)境都有，修改時(shí)，應(yīng)該同時(shí)修改兩處。
port：這里改成3000，這個(gè)是在開發(fā)時(shí)，webpack-dev-server運(yùn)行的端口。
proxyTable：這個(gè)屬性用于將請求轉(zhuǎn)發(fā)到指定地址去。這里的配置意思是將所有以/demo/api開頭的請求，都轉(zhuǎn)發(fā)到http://localhost:8080地址。

五、建立頁面

index/index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>index</title>
</head>
<body>
 <div id="app"></div>
</body>
</html>

index/index.js

import Vue from 'vue'
import IndexView from './index.vue'
import router from './router'
// import VueResource from 'vue-resource'; // 使用前先npm install vue-resource --save下載vue-resource
// Vue.use(VueResource);
new Vue({
 el: '#app',
 router,
 render: h => h(IndexView)
});

index/index.vue

<template>
 <div>
 <router-view></router-view>
 </div>
</template>

<script>
 export default {
 }
</script>

<style>
</style>

index/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
Vue.use(Router);
export default new Router({
 routes: [
 {
  path: '/',
  name: 'Hello',
  component: Hello
 }
 ]
})

index/components/Hello.vue

<template>
 <div>
 Hello {{ name }}
 </div>
</template>

<script>
 export default {
 data(){
  return {
  name: "admin"
  }
 },
 mounted(){
  //this.$http.get("/demo/api/userinfo").then(resp =>{
  // this.name = resp.data.data;
  //});
 }
 }
</script>
<style>
</style>

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>login</title>
</head>
<body>
 <div id="app"></div>
</body>
</html>

import Vue from 'vue'
import LoginView from './login.vue'
// import VueResource from 'vue-resource';
// Vue.use(VueResource);
new Vue({
 el: '#app',
 render: h => h(LoginView)
})

<template>
 <div>
 <form id="login-form">
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密碼：</label>
  <input type="password" id="password" name="password"><br>
  <br>
  <button @click.prevent="submit">登錄</button>
 </form>
 </div>
</template>
<script>
 export default {
 methods:{
  submit(){
  window.location = "/demo/index.html";
  //let formData = new FormData(document.getElementById("login-form"));
  //this.$http.post("/demo/api/login", formData).then(resp => {
  // if (resp.data.status === 200){
  // window.location = "/index.html";
  // }else {
  // alert(resp.data.desc);
  // }
  //})
  }
 }
 }
</script>
<style>
</style>