Vuejs2 + Webpack框架里,模拟下载的实例讲解
(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )
在实际的开发工作中，难免要配合销售人员，提前做一些前端的 DEMO 出来。这个时候往往还没有连接后端 API。假如要演示一个下载连接，那么应该如何做呢？
我们希望能够达成以下两点：
1、在开发环境下，我们可以在 webpack-dev-server 开发服务器上点击下载连接，点击后浏览器就能不下载文件。
2、当演示的时候，代码编译后放到 nginx 中。用户可以点击下载链接。nginx存放的都是业务代码。
那么如何做到这两点呢？假如我们要模拟下载一个 test.docx 文件。我们可以利用 url-loader 来对 .docx 文件做处理。可能有人会问：“url-loader 一般不是处理 img 标签里面的图片文件路径吗？”为了解决这个 img 标签的问题，我们可以在一个页面中加上隐藏的图片标签。最后加一个 a 标签： <a href="/test.docx" rel="external nofollow" rel="external nofollow" >下载</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" rel="external nofollow" rel="external nofollow" >下载</a> <!-- 触发 url-loader，使得 url-loader 处理 word 文档。 --> <img v-show="isShow" src="/UploadFiles/2021-04-02/test.docx">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="/UploadFiles/2021-04-02/[name].[chunkhash].js">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"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }以上这篇Vuejs2 + Webpack框架里,模拟下载的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
下一篇：JS实现点击拉拽轮播图pc端移动端适配
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。