Vuejs2 + Webpack框架里,模拟下载的实例讲解

2023-09-08 09:42:04 217

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

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

1、在开发环境下，我们可以在webpack-dev-server开发服务器上点击下载连接，点击后浏览器就能不下载文件。

2、当演示的时候，代码编译后放到nginx中。用户可以点击下载链接。nginx存放的都是业务代码。

那么如何做到这两点呢？假如我们要模拟下载一个test.docx文件。我们可以利用url-loader来对.docx文件做处理。可能有人会问：“url-loader一般不是处理img标签里面的图片文件路径吗？”为了解决这个img标签的问题，我们可以在一个页面中加上隐藏的图片标签。最后加一个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

home.vue




.home-wrapper{
.my-style{
width:900px;
height:600px;
float:right;margin-right:200px;
padding-top:100px;
color:#FF0000;
}
}

main.js

importVuefrom'vue'
importAppfrom'./App.vue'
importVueRouterfrom'vue-router'
importroutesfrom'./router'
importVueSuperagentfrom'vue-superagent'
import'babel-polyfill';

Vue.use(VueRouter);
Vue.use(VueSuperagent);

constrouter=newVueRouter({
mode:'history',
routes
})

newVue({
el:'#app',
router,
render:h=>h(App)
})

router.js

importHomefrom'./home.vue'

exportdefault[{
path:'/',
component:Home
}]

.babelrc

{
"presets":[
["latest",{
"es2015":{"modules":false}
}]
]
}

index.template.html





blog02

package.json

{
"name":"blog02",
"description":"CSDNblog02",
"version":"1.0.0",
"author":"",
"private":true,
"scripts":{
"dev":"cross-envNODE_ENV=developmentwebpack-dev-server--open--hot",
"build":"rimrafdist&&cross-envNODE_ENV=productionwebpack--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

varpath=require('path')
varwebpack=require('webpack')
constHTMLPlugin=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:{
//Sincesass-loader(weirdly)hasSCSSasitsdefaultparsemode,wemap
//the"scss"and"sass"valuesforthelangattributetotherightconfigshere.
//otherpreprocessorsshouldworkoutofthebox,noloaderconfiglikethisnecessary.
'scss':'vue-style-loader!css-loader!sass-loader',
'sass':'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
//othervue-loaderoptionsgohere
}
},
{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/
},
//fontloader
{
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里
newwebpack.optimize.CommonsChunkPlugin({name:'vendor'}),
//编译HTML。目的：在生产环境下，为了避免浏览器缓存，需要文件按照哈希值重命名。
//这里编译可以自动更改每次编译后引用的js名称。
newHTMLPlugin({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([
newwebpack.DefinePlugin({
'process.env':{
NODE_ENV:'"production"'
}
}),
newwebpack.optimize.UglifyJsPlugin({
sourceMap:true,
compress:{
warnings:false
}
}),
newwebpack.LoaderOptionsPlugin({
minimize:true
})
])
}

以上这篇Vuejs2+Webpack框架里,模拟下载的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

Vuejs2 + Webpack框架里,模拟下载的实例讲解

热门推荐

随机推荐