首页 > 其他分享 >关于vue如何在本地直接运行打包后的网页

关于vue如何在本地直接运行打包后的网页

时间:2023-12-04 17:33:40浏览次数:40  
标签:vue 网页 路径 publicPath test config 打包

使用npm run build可以对vue项目进行打包

 生成文件夹dist,里面的html只能放在服务器查看效果,在本地打开会报错

 这是因为vue-cli打包时,默认的publicPath路径是 '/'

只需要在vue.config.js文件中将publicPath路径改为  './'  或  '' 

 如果服务器上需要增加一层路径,也是直接在vue.config.js文件中将publicPath路径进行修改,例如新增一层test:publicPath:'/test/'

标签:vue,网页,路径,publicPath,test,config,打包
From: https://www.cnblogs.com/fruitesBlogs/p/17875501.html

相关文章

  • 新建vue项目,并引入element ui和axios的步骤
    一、新建vue项目(1)win+R进入命令行 使用cmd (2)切换到需要创建vue项目的盘符下  直接D:就能切换到D盘 (3)使用vueui指令进入图形化创建vue项目的界面(注意在创建项目的时候,命令行不能关闭)  之后就在浏览器的界面中进行创建  点击下方的“在此创建新项目”(4)......
  • vue3 setup 父组件向子组件传递参数、方法|子组件向父组件传递数据,函数
    https://blog.csdn.net/qq_27517377/article/details/123163381https://blog.csdn.net/qq_27517377/article/details/123166367vue3setup父组件向子组件传递参数参数<template><el-rowclass="mb-4"> <el-buttontype="danger">props.vue传......
  • vue路由局部刷新-局部页面刷新达到和F5刷新一样的注销
    1.静态路由页面加上这一条{  path:"/redirect/:path(.*)",  component:()=>import("@/views/redirect/index.vue") },2.点击事件的vue方法里面用router.replace({path:"/redirect/projects/templates/edit",......
  • 【全栈第一课】Vue快速入门
    一、前端工程化JS的复用就是模块化UI样式复用就是组件化(LayUI里面的都是组件化)所以说前端工程化就是有规范的写,不能你一个样式我一个样式,不够统一不够专业!二、WebPack是什么前端工程化的具体实现方案基本使用实现奇偶行变色1.初始化包管理工具通过npminit-y生成2.安装jquery......
  • 手写类似于BetterScroll样式的左右联动菜单 uni-app+vue3+ts (使用了script setup语法
     注意:在模拟器用鼠标滚动是不会切换光标的,因为使用的是触摸滑动。【自定义类型贴在最后了】script部分如下:import{onMounted}from'vue'importtype{orderDetail}from'@/types/category'importtype{mainArr}from'@/types/main-arr'import{nextTick,ref}......
  • vue3使用::v-deep深度选择器不生效
    会出现 ::v-deepusageasacombinatorhasbeendeprecated.Use:deep(<inner-selector>)insteadof::v-deep<inner-selector>.的报错::v-depth用作组合子已被弃用。使用:deep(<内部选择器>)而不是::v-deep<内部选择器>。需要改成:deep(class),示例代码如下:deep(.el-checkbo......
  • 在线CAD(网页编辑DWG)中使用mxcad库绘制矩形
    前言在mxcad中绘制矩形,本质上还是绘制多段线,那如何用mxcad中的多段线去绘制一个支持倒角和圆角的矩形呢,在autocad中绘制一个矩形会通过一些命令或者输入关键字来确定是否需要倒角圆角或者通过面积,宽高去绘制。下面我们将模仿autocad的绘制矩形的交互绘制,完整的实现一个动态交......
  • Vue学习计划--Vue2(一)简单了解vue
    Vue2的终止支持时间为2023年12月31日。在这个矛盾的时间点,还是决定先把vue2的笔记放出来,在Vue2完结后再把Vue3的笔记补上。这样呢,2和3都不落下,也算是来一个启承的作用吧。在工作中呢,旧的项目可以维护,新的项目也可以上手。后续呢会有react16和react18、node、webpack、vite、以及实......
  • [Vue]按页数和行数重新计算表格序号
    转载自:https://blog.csdn.net/qq_48203828/article/details/123224024 1、 2、<el-table-columnlabel="序号"style="width:120px;height:50px"header-align="center"align="center"><templateslot-scope=&quo......
  • Vue3用户代码片段
    1.defineComponent语法{ "Printtoconsole":{ "prefix":"vue3", "body":[ "<template>", "<divclass=\"container\">", "", "</div>&q......