需求:系统有个操作手册,点击会在浏览器新开个窗口并打开pdf文件。这个pdf文件存储在本地assets文件夹中。
文件结构:
注:直接使用window.open(文件路径)不能打开,需要在vue.config.js中配置所需文件
引入图中红框中的代码
-
- const webpack = require('webpack')
- plugins: [
- // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
- new CompressionPlugin({
- cache: false, // 不启用文件缓存
- test: /\.(js|css|html)?$/i, // 压缩文件格式
- filename: '[path].gz[query]', // 压缩后的文件名
- algorithm: 'gzip', // 使用gzip压缩
- minRatio: 0.8 // 压缩率小于1才会压缩
- }),
- new webpack.ProvidePlugin({
- $: "jquery",
- jQuery: "jquery",
- "windows.jQuery": "jquery"
- }),
-
- ],
- module: {
- rules: [{
- test: /\.pdf$/,
- use: [{
-
- loader: 'url-loader',
- options: {
- limit: 2,
- name: 'files/[name].[ext]'
- }
- }]
- }]
- }
页面中打开:(我是在初始化的时候就打开文件,没用按钮)
- mounted(){
- window.open(require('../../../../assets/xxx.pdf'))
- }