vue中使用window.open打开assets文件夹下的pdf文件

需求:系统有个操作手册,点击会在浏览器新开个窗口并打开pdf文件。这个pdf文件存储在本地assets文件夹中。

文件结构:

注:直接使用window.open(文件路径)不能打开,需要在vue.config.js中配置所需文件

引入图中红框中的代码

javascript 复制代码
const webpack = require('webpack')
javascript 复制代码
        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]'
                    }
                }]
            }]
        }

页面中打开:(我是在初始化的时候就打开文件,没用按钮)

javascript 复制代码
mounted(){
    window.open(require('../../../../assets/xxx.pdf'))
}
相关推荐
1024小神7 分钟前
vue3 + vite项目,如果在build的时候对代码加密混淆
前端·javascript
轻语呢喃26 分钟前
useRef :掌握 DOM 访问与持久化状态的利器
前端·javascript·react.js
橙某人1 小时前
🖼️照片展示新境界!等高不等宽自适应布局完整教程⚡⚡⚡
前端·javascript·css
尝尝你的优乐美1 小时前
man!在console中随心所欲的打印图片和字符画
前端·javascript·vue.js
paopaokaka_luck2 小时前
校园快递小程序(腾讯地图API、二维码识别、Echarts图形化分析)
vue.js·spring boot·后端·小程序·uni-app
掘金012 小时前
Vue3 项目中实现特定页面离开提示保存功能方案
javascript·vue.js
余_弦3 小时前
区块链钱包开发(十九)—— 构建账户控制器(AccountsController)
javascript·区块链·以太坊
前端Hardy3 小时前
HTML&CSS:有趣的小铃铛
javascript·css·html
起这个名字3 小时前
Vue2/3 v-model 使用区别详解,不了解的来看看
前端·javascript·vue.js
sorryhc3 小时前
H5大视频上传治理
前端·javascript·性能优化