Vuejs2 + Webpack框架里，模拟下载的实现方法

来源：互联网发布：帝国竞争算法程序编辑：程序博客网时间：2024/06/16 08:11

在实际的开发工作中，难免要配合销售人员，提前做一些前端的 DEMO 出来。这个时候往往还没有连接后端 API。假如要演示一个下载连接，那么应该如何做呢？

我们希望能够达成以下两点：

在开发环境下，我们可以在 webpack-dev-server 开发服务器上点击下载连接，点击后浏览器就能不下载文件。
当演示的时候，代码编译后放到 nginx 中。用户可以点击下载链接。nginx存放的都是业务代码。

那么如何做到这两点呢？假如我们要模拟下载一个 test.docx 文件。我们可以利用 url-loader 来对 .docx 文件做处理。可能有人会问：“url-loader 一般不是处理 img 标签里面的图片文件路径吗？”为了解决这个 img 标签的问题，我们可以在一个页面中加上隐藏的图片标签。最后加一个 a 标签： <a href="/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 class="home-wrapper">        <span class="my-style">这里是首页</span>        <!-- 下载链接 -->        <a href="/test.docx">下载</a>        <!-- 触发 url-loader，使得 url-loader 处理 word 文档。 -->        <img v-show="isShow" src="./test.docx"/>    </div></template><script>export default {    data(){        // 隐藏包含 word 文档路径的 img 标签。        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'],        // 把共用的库放到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/' 改成 '/'    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:[    // 把共用的库放到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'  // 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    })  ])}

0 0