在实际的开发工作中，难免要配合销售人员，提前做一些前端的 DEMO 出来。这个时候往往还没有连接后端 API。假如要演示一个下载连接，那么应该如何做呢？
我们希望能够达成以下两点：
1、在开发环境下，我们可以在 webpack-dev-server 开发服务器上点击下载连接，点击后浏览器就能不下载文件。
2、当演示的时候，代码编译后放到 nginx 中。用户可以点击下载链接。nginx存放的都是业务代码。
那么如何做到这两点呢？假如我们要模拟下载一个 test.docx 文件。我们可以利用 url-loader 来对 .docx 文件做处理。可能有人会问：“url-loader 一般不是处理 img 标签里面的图片文件路径吗？”为了解决这个 img 标签的问题，我们可以在一个页面中加上隐藏的图片标签。最后加一个 a 标签： <a href="https://www.jb51.net/test.docx" >下载</a>。下面的篇幅要帮助读者搭建一个简单的项目，来演示这种方法。
* 演示项目 *
项目名称是blog02，项目目录结构如下：
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> <span>这里是首页</span> <!-- 下载链接 --> <a href="https://www.jb51.net/test.docx" >下载</a> <!-- 触发 url-loader，使得 url-loader 处理 word 文档。 --> <img v-show="isShow" src="https://www.jb51.net/article/test.docx"/> </div> </template> <script> export default { data(){ // 隐藏包含 word 文档路径的 img 标签。 return {isShow:false}; } }; </script> <style lang="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:'https://www.jb51.net/', 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> <router-view></router-view> </div> <!--<script src="https://www.jb51.net/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'], // 把共用的库放到vendor.js里 vendor: [ 'babel-polyfill', 'vue', 'vue-router', 'vuex' ] }, output: { path: path.resolve(__dirname, './dist'), // 因为用到了 html-webpack-plugin 处理HTML文件。处理后的HTML文件都放到了 // dist文件夹里。html文件里面js的相对路径应该从使用 html-webpack-plugin 前 // 的'/dist/' 改成 'https://www.jb51.net/' publicPath: 'https://www.jb51.net/', // 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:[ // 把共用的库放到vendor.js里 new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}), // 编译HTML。目的：在生产环境下，为了避免浏览器缓存，需要文件按照哈希值重命名。 // 这里编译可以自动更改每次编译后引用的js名称。 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' // 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框架里,模拟下载的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: