Vue-cli项目打开其他html文件

最新推荐文章于 2024-04-26 17:54:13 发布
最新推荐文章于 2024-04-26 17:54:13 发布
阅读量825 收藏
点赞数
文章标签： vue.js 其他 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q879936814/article/details/120995224
版权

项目需求是打开新窗口，进行图片展示一系列操作，新建html文件，写好样式尝试window.open()，发现打开的并不是那个文件，查阅了一些资料发现：

vue-cli2项目需要把html文件放入static文件中，然后用相对路径 …/static/new.html打开

vue-cli3项目需要把html文件放入public文件中，然后用相对路径 …/public/new.html打开

codeMing_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue-cli webpack打包后加载资源的路径问题
12-10
vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。 1.一个是css,js,ico等文件加载不到，是目录里少了dist 打开页面时一片空白 解决办法： config/index.js文件的build->assetsPublicPath的默认值改为 ‘./’ assetsPublicPath：资源的根目录。这个是通过http服务器运行的url路径。因为webapp和static中间还有层dist,所以要用’./’ 2.另一个就是单纯的在背景图使用相对路径导致加载不到图片 例如登录页面的背景图设置 我的目录结构是这样的， 页的时候没发使用@/../st
vue-cli-webpack:从零开始搭Vue项目
05-09
vue-cli-webpack 从零开始搭Vue项目，主要是想脱离对脚手架全家桶的依赖，以及从中深入学习一点webpack相关的知识，不要每次打开package.json以及webpack的配置文件都一脸懵逼。 新建项目 mkdir vue-cli-webpack cd vue-cli-webpack 使用npm init生成package.json文件 npm init 执行上述命令后，在项目文件夹下生成了package.json文件。 文件中的各个字段介绍： 引入webpack webpack使用教程： npm install webpack --save-dev npm install webpack-cli -D 然后创建一些必要的文件： touch index.html mkdir src cd src touch main.js main.js文件如下： console.log
【vue】在vue项目直接使用html文件
代码随想录
04-30 8291
1.在public目录中新建html文件夹，放入html文件 2.在main.js加入访问路径 Vue.prototype.$publicURL = './'; 3.在vue组件中使用跳转 <a href="javascript:void(0)" @click="jumpOutsideLink(`${$publicURL}html/xxxx.html`,'xxxx协议')">《xxxx协议》</a> //mixin中方法 使用window.open进行跳转 .
用vue打开服务端的html文件,详解如何使用Vue2做服务端渲染
weixin_35715490的博客
06-15 667
vue更新到2.0之后，作者就宣告不再对vue-resource更新，并且vue-resource不支持SSR，所以我推荐使用axios,在服务端和客户端可以同时使用。vue2使用了虚拟DOM,因此对浏览器环境和服务端环境要分开渲染,要创建两个对应的入口文件。浏览器入口文件 client-entry.js使用 $mount 直接挂载服务端入口文件 server-entry使用vue的SSR功能直接...
vue中打开html页面
c_qianxia5040的博客
06-17 9489
在vue项目中打开word生成的html文件，首先将html文件放到public下面，如下图 然后找个触发的时机，比如点击某元素，就可以打开html文件，如下图 window.open(`/operationManual.htm`)
在vue项目中如何使用html页面
热门推荐
weixin_44221944的博客
04-28 2万+
如果有需求在vue页面要跳转新链接页页面可以使用原生html页面，下面将讲述从跳转到使用的过程 1、跳转到html页面 <el-button style="background:#04FFFD;border:none;position:absolute;top:2px;right:100px;z-index:2001;font-weight:bold" round> <a target="_blank" :href="hreft">视频监控大屏</a> &lt
VUE页面中加载外部HTML
leveretz的博客
11-08 5960
VUE页面中加载外部HTML
vue 后台数据列表获取图片_vue中如何获取后台数据
weixin_32447969的博客
01-30 410
需要引用vue-resource在入口函数中加入import VueResource from ‘vue-resource‘Vue.use(VueResource);在package.json文件中加入"dependencies": {"vue": "^2.2.6","vue-resource":"^1.2.1"},请求如下mounted: function () {// GET /someUrl...
vue打开新html,vue在新窗口打开页面的方法
weixin_39654751的博客
07-10 7646
有时候后咱们会须要在一个新窗口打开页面，而咱们都知道，vue是单页面的应用，经过router在内部跳转的。可是依然有办法实现这个需求。vue刚开始在网上找了一下，有两种方式，一种是给outer-link标签添加tag=a跳转打开新窗口,亲测有效。this热门好货再一种就是经过router来实现，使用resolve方法将路径转换出来，window来打开codelet routeData = this...
vue嵌套html跳转静态文件
weixin_59787755的博客
11-19 1928
自己遇到的问题记录
关于vue-cli3打包代码后白屏的解决方案
01-19
最近使用了vue-cli3.0 开发了一个移动网页端项目，准备打包发布了。按照以往的流程 npm run build 问题来了 打开 dist index.html 文件发现白屏。打开调试后 发现文件引用路径不对 根据以往的经验 根目录下新建 vue....
vue-cli打包后本地运行dist文件中的index.html操作
10-14
主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue-cli项目打包出现空白页和路径错误的问题
01-19
vue-cli项目打包： 1. 命令行输入：npm run build 打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。 第一个问题，文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 337
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 104
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 100
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 139
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue 实现级联选择器功能
清音的博客
04-22 506
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 139
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
vue项目 页面都是 html
06-07
Vue 项目的页面确实是 HTML，但是 Vue 组件是一段 JavaScript 代码，它们可以被渲染成 HTML 页面。在 Vue 项目中，通常会将每个组件放在一个单独的文件中，这个文件中包含了组件的 HTML 模板、CSS 样式和 JavaScript 代码。这些文件的后缀名通常是 `.vue`。 在 Vue 项目中，通常会有一个 `App.vue` 组件，它是整个项目的根组件。`App.vue` 组件中包含了项目的整体布局和导航栏等公共部分，同时也通过 `<router-view>` 标签来渲染每个页面的内容。每个页面都是一个单独的组件，它们通过路由来进行切换。 在 HTML 页面中，可以通过引入 Vue 的 JavaScript 文件和项目的主 JavaScript 文件来启动 Vue 应用。在主 JavaScript 文件中，需要将 Vue 实例挂载到 HTML 页面的某个元素上，例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue App</title> </head> <body> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="main.js"></script> </body> </html> ``` 在 `main.js` 中，可以创建 Vue 实例并将其挂载到 `#app` 元素上，例如： ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; Vue.config.productionTip = false; new Vue({ router, render: h => h(App), }).$mount('#app'); ``` 其中，`App` 是根组件，`router` 是路由配置。`render` 函数用于将根组件渲染到 HTML 页面上。 总之，Vue 项目的页面确实是 HTML，但是 Vue 组件是一段 JavaScript 代码，它们可以被渲染成 HTML 页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值