在實(shí)際的開(kāi)發(fā)工作中，難免要配合銷(xiāo)售人員，提前做一些前端的 DEMO 出來(lái)。這個(gè)時(shí)候往往還沒(méi)有連接后端 API。假如要演示一個(gè)下載連接，那么應(yīng)該如何做呢？
我們希望能夠達(dá)成以下兩點(diǎn)：
1、在開(kāi)發(fā)環(huán)境下，我們可以在 webpack-dev-server 開(kāi)發(fā)服務(wù)器上點(diǎn)擊下載連接，點(diǎn)擊后瀏覽器就能不下載文件。
2、當(dāng)演示的時(shí)候，代碼編譯后放到 nginx 中。用戶(hù)可以點(diǎn)擊下載鏈接。nginx存放的都是業(yè)務(wù)代碼。
那么如何做到這兩點(diǎn)呢？假如我們要模擬下載一個(gè) test.docx 文件。我們可以利用 url-loader 來(lái)對(duì) .docx 文件做處理?？赡苡腥藭?huì)問(wèn)：“url-loader 一般不是處理 img 標(biāo)簽里面的圖片文件路徑嗎？”為了解決這個(gè) img 標(biāo)簽的問(wèn)題，我們可以在一個(gè)頁(yè)面中加上隱藏的圖片標(biāo)簽。最后加一個(gè) a 標(biāo)簽： <a href="/test.docx" rel="external nofollow" rel="external nofollow" >下載</a>。下面的篇幅要幫助讀者搭建一個(gè)簡(jiǎn)單的項(xiàng)目，來(lái)演示這種方法。
* 演示項(xiàng)目 *
項(xiàng)目名稱(chēng)是blog02，項(xiàng)目目錄結(jié)構(gòu)如下：
blog02 │ ├─src │ ├─App.vue │ ├─home.vue │ ├─main.js │ ├─test.docx │ └─router.js │ ├─.babelrc ├─index.template.html ├─package.json └─webpack.config.js
App.vue
<template> <div> <router-view></router-view> </div></template><script>export default {}</script>home.vue
<template> <div class="home-wrapper"> <span class="my-style">這里是首頁(yè)</span> <!-- 下載鏈接 --> <a href="/test.docx" rel="external nofollow" rel="external nofollow" >下載</a> <!-- 觸發(fā) url-loader，使得 url-loader 處理 word 文檔。 --> <img v-show="isShow" src="./test.docx"/> </div></template><script>export default { data(){ // 隱藏包含 word 文檔路徑的 img 標(biāo)簽。 return {isShow:false}; }};</script><style lang="scss" rel="stylesheet/scss" scoped>.home-wrapper{ .my-style{ width:900px; height:600px; float:right;margin-right:200px; padding-top:100px; color:#FF0000; }}</style>main.js
import Vue from 'vue'import App from './App.vue'import VueRouter from 'vue-router'import routes from './router'import VueSuperagent from 'vue-superagent'import 'babel-polyfill';Vue.use(VueRouter);Vue.use(VueSuperagent);const router = new VueRouter({ mode: 'history', routes})new Vue({ el: '#app', router, render: h => h(App)})router.js
import Home from './home.vue'export default [{ path:'/', component:Home}].babelrc
{ "presets": [ ["latest", { "es2015": { "modules": false } }] ]}index.template.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>blog02</title> </head> <body> <div id="app"> <router-view></router-view> </div> <!--<script src="/dist/[name].[chunkhash].js"></script>--> </body></html>
package.json
{ "name": "blog02", "description": "CSDN blog02", "version": "1.0.0", "author": "", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "babel-polyfill": "^6.23.0", "vue": "^2.2.1", "vue-router": "^2.3.0", "vue-superagent": "^1.2.0" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-latest": "^6.0.0", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "file-loader": "^0.9.0", "html-webpack-plugin": "^2.28.0", "node-sass": "^4.5.0", "rimraf": "^2.6.1", "sass-loader": "^5.0.1", "url-loader": "^0.5.8", "vue-loader": "^11.1.4", "vue-template-compiler": "^2.2.1", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.0" }}webpack.config.js
var path = require('path')var webpack = require('webpack')const HTMLPlugin = require('html-webpack-plugin')module.exports = { entry: { app: ['./src/main.js'], // 把共用的庫(kù)放到vendor.js里 vendor: [ 'babel-polyfill', 'vue', 'vue-router', 'vuex' ] }, output: { path: path.resolve(__dirname, './dist'), // 因?yàn)橛玫搅?html-webpack-plugin 處理HTML文件。處理后的HTML文件都放到了 // dist文件夾里。html文件里面js的相對(duì)路徑應(yīng)該從使用 html-webpack-plugin 前 // 的'/dist/' 改成 '/' publicPath: '/', // publicPath: '/dist/', filename: '[name].[hash].js' // filename:'build.js' }, module: { rules: [ { test: //.vue$/, loader: 'vue-loader', options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this necessary. 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } // other vue-loader options go here } }, { test: //.js$/, loader: 'babel-loader', exclude: /node_modules/ }, // font loader { test: //.(ttf|eot|woff|svg)$/i, loader: 'url-loader' }, // 圖片處理 { test: //.(png|jpg|gif)$/, loader: 'url-loader', options: { limit: '1000', name: '[name].[ext]?[hash]' } }, // 處理模擬下載文件 { test: //.(docx)$/, loader: 'url-loader', options: { limit: '10', name: '[name].[ext]' } } // { // test: //.(png|jpg|gif|svg)$/, // loader: 'file-loader', // options: { // name: '[name].[ext]?[hash]' // } // } ] }, plugins:[ // 把共用的庫(kù)放到vendor.js里 new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}), // 編譯HTML。目的：在生產(chǎn)環(huán)境下，為了避免瀏覽器緩存，需要文件按照哈希值重命名。 // 這里編譯可以自動(dòng)更改每次編譯后引用的js名稱(chēng)。 new HTMLPlugin({template: 'index.template.html'}) ], resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ])}以上這篇Vuejs2 + Webpack框架里,模擬下載的實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
