vue项目中,把已经写好的html直接放进去,而不经过编译,直接跳转html页面

这篇具有很好参考价值的文章主要介绍了vue项目中,把已经写好的html直接放进去,而不经过编译,直接跳转html页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在vue项目里新增一个不需要登录的页面,那么只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,步骤如下:

1.项目根目录里,如果有public文件夹,则直接放进public文件夹里,与index.html 同级开始,按照项目路径访问。

  1. 例如:在public新建pages/test.html, 则: 浏览器访问路径是: http://host:port/pages/test.html
  2. 注意,此时test.html文件里引用的所有js/css/image等路径,都要改成项目根目录开始的绝对路径的形式。

2.如果项目根目录没有public,但是有static文件夹,则同样把/pages/test.html放进 static文件夹里,按照static的绝对路径访问

  1. 例如:在static中新建 pages/test2.html, 则浏览器访问路径是:http://host:port/static/pages/test2.html
  2. 注意:此时test.html文件里,引用的所有js、css、images等路径,都要改成 /static/xxx/xxx.xx的形式,如:

本项目中把test2.html 所引用的css文件,存放路径为:static/pages/css/test2.css,则在test2.html中的引用应该是:/static/pages/css/test2.css文章来源地址https://www.toymoban.com/news/detail-699293.html

到了这里,关于vue项目中,把已经写好的html直接放进去,而不经过编译,直接跳转html页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [GN] 后端接口已经写好 初次布局前端需要的操作(例)

    提示:前端项目一定要先引入组件 配置。再编码!!!! 使用·安装脚手架工具: 创建项目: 脚手架已经帮我们配置了代码美化、自动校验、格式化插件等,无需再自行配置 但是需要在 webstorm 里开启代码美化插件: setting 中 搜索Prettier 启用 prettier 组件库:https://arco.desi

    2024年01月20日
    浏览(35)
  • 看这你已经赢麻了,勿以赢小而不麻,2022软件测试八股文最全音

    不废话,直接上干货!答案已整理好,文末拿去即可!非常好用!   1、在搜索引擎中输入汉字就可以解析到对应的域名,请问如何用LoadRunner进行测试? 2、试述软件的概念和特点?软件复用的含义?构件包括哪些? 3、软件生存周期及其模型是什么? 4、什么是软件测试?软

    2023年04月09日
    浏览(40)
  • 【快应用】adbutton如何直接下载广告而不跳落地页再下载

     【】 原生广告、adbutton、下载 【问题背景】 快应用中的原生广告推出了adbutton组件来直接下载广告app,在使用的时候,点击adbutton按钮的安装文案,不是直接下载广告app,而是跳转到落地页后直接下载,这种情形该如何解决? 相关代码: 【问题分析】 可以看到adbu

    2024年02月14日
    浏览(22)
  • Vue项目上线打包好的文件如何在服务器上部署?

    1.打开router下的js文件,调成hash模式: mode:\\\'hash\\\'   2.终端输入: npm run build 3.此时项目中会多出一个dist的文件,这个文件就是我们打包出来的项目   (1)建立一个新的文件夹 (2)终端输入命令: npm init (3)输入: xxx_server (4)然后一路按回车到文件夹——框架完成,如下图

    2024年02月11日
    浏览(56)
  • react、Vue打包直接运行index.html不空白方法

    在根目录下创建 vue.config.js 文件,写入

    2024年01月21日
    浏览(40)
  • #html直接引用vue和element-ui的方法

    可以在官网下载vue和element-ui到本地,直接引入。也可以用npm下载依赖后,将指定的文件保存到HTML项目的js文件夹中,以下为引用方法: 1.引入vue 2.引入element-ui (1).js (2).css (3).icon图标 3.使用

    2024年02月12日
    浏览(37)
  • 在vscode中如何关闭已经运行的vue项目

    vue项目运行命令是npm run dev(vue cli2.0)/npm run serve(vue cli3.0) 想要停掉这个运行的项目按快捷键ctrl+c就可以,连按两遍,不用输入y 补充: 1.常用的终端命令 tab : 补全功能 上下方向键 : 翻看查看过的命令 cd … : 返回上一层目录 cd ‘文件夹’ : 进入文件夹 cd : 跳转到硬盘的根

    2023年04月12日
    浏览(61)
  • PowerBi连接MySQL提示需安装组件才能使用,本人删去已经下载好的组件,再做一份详细教程。

    当我们用PowerBi连接Mysql时候,他突然提示我们需要安装组件。 检查自己的MySQL版本 打开cmd运行框,输入命令 mysql -uroot -p ,再输入数据库密码 输入 select version(); 我这里是8.0.16版本,记住自己的版本号 下载 mysql connector https://downloads.mysql.com/archives/c-net/ 选择自己对于的版本号下载

    2024年02月05日
    浏览(45)
  • 直接在html中引入Vue.js的cdn来实现一个简单的上传图片组件

    当使用 Vue.js 的 CDN 来实现一个简单的上传图片组件时,你可以利用 Vue 的数据绑定和事件处理能力,结合 HTML 和 CSS,轻松地创建一个交互式的图片上传界面。以下是一个示例: index.html TANKING https://afdian.net/item/ffa3292a337c11ee9a8c5254001e7c00

    2024年02月13日
    浏览(44)
  • HTML+CSS滚动条样式如何单独给firefox设置 scrollbar-width: none;,而不影响其他浏览器

    要在Firefox中单独设置滚动条样式,你可以使用​ ​@-moz-document​ ​规则。这个规则允许你为特定的浏览器或浏览器引擎应用样式。 下面是一个例子,演示如何在Firefox中隐藏滚动条: 在上面的例子中,​ ​@-moz-document url-prefix()​ ​表示只有在URL以空字符串(即所有URL)为前

    2024年02月22日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包