vue3项目打包和上线

这篇具有很好参考价值的文章主要介绍了vue3项目打包和上线。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、vue3项目打包

1.去掉项目中console.log和debugger

在vite.config.ts文件中添加esbuild:{drop:["console","debugger"]}

export default defineConfig({
  esbuild:{//打包时去除console和debugger代码
    drop:["console","debugger"]
  },
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }), vue(), vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 3000,
    open: false, //自动打开 
    base: "./ ", //生产环境路径
    proxy: { // 本地开发环境通过代理实现跨域,生产环境使用 nginx 转发
      // 正则表达式写法
      '/m.api': {
        target: 'http://192.168.1.188:8080', // 后端服务实际地址
        changeOrigin: true, //开启代理
      }
    }
  },
})

2.去掉ts类型检测

在package.json文件中scripts对象中

"build": "run-p type-check build-only"改为"build": "run-p build-only"

3.打包

npm run build

4.预览打包后的项目

npm run preview

5.预览时遇到的一些问题

(1)echarts首次渲染没问题,第二次渲染却成空白

产生原因:echarts插件自带的bug

解决方法

onBeforeUnmount(() => {//防止echarts带来的空白bug
    if (column) {
        column.dispose()
        column = undefined
    }
    if (line) {
        line.dispose()
        line = undefined
    }
    if (pie) {
        pie.dispose()
        pie = undefined
    }
    if (pies) {
        pies.dispose()
        pies = undefined
    }
})

(2)控制台输出404

产生原因:未找到图标文件,路径错误

解决方法:在入口index.html文件中路径中的"."去掉

<link rel="icon" href="./favicon.ico">
改为
<link rel="icon" href="/favicon.ico">

<link rel="stylesheet" href="./public/iconfont/iconfont.css">
改为
<link rel="stylesheet" href="/public/iconfont/iconfont.css">

二、项目上线

1.上线,将打包好的文件上传到服务器

服务器分为:外网服务器和内网服务器

2.常见文件上传的方式

(1)8UFTP,文件传输工具

(2)宝塔,服务器管理工具(常用、方便、重点)

3.使用宝塔上线操作过程

(1)宝塔是以网页的方式提供,所以你需要获取以下信息(公司提供)

网站:例如:http://zxwyit.cn:8888/3XelX3u9

用户名和密码:例如admin 10086

(2)在宝塔内创建站点

vue3 打包,vue3,javascript,前端,开发语言,Powered by 金山文档

(3)上传打包好的文件到站点

vue3 打包,vue3,javascript,前端,开发语言,Powered by 金山文档

(4)测试上线后的项目

vue3 打包,vue3,javascript,前端,开发语言,Powered by 金山文档

4.项目上线后遇到的一些问题

(1)刷新页面后跳到404错误页面

产生原因:自带的bug

解决方法1:将路由模式改为hash模式,在router文件夹下的index.ts

history: createWebHistory(import.meta.env.BASE_URL)
改为
history: createWebHashHistory(import.meta.env.BASE_URL)

解决方法2:不改变路由模式,修改服务器配置文件,

具体参考vue-router官方文档v4.x版本中的不同的历史模式中的服务器配置示例

示例:这里以nginx类型的服务器为例

在宝塔中站点设置中配置文件里"禁止访问的文件或目录"的位置添加一下代码文章来源地址https://www.toymoban.com/news/detail-770786.html

location / {//解决刷新404问题
  try_files $uri $uri/ /index.html;
}

location /m.api {//解决跨域问题
  proxy_pass http://192.168.1.188:8080(跨域代理)
}
vue3 打包,vue3,javascript,前端,开发语言,Powered by 金山文档

到了这里,关于vue3项目打包和上线的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • tomcat部署前端vue项目(项目上线具体操作)

    在linux上安装tomcat可以直接在linux服务器上通过wget方式直接下载tomcat,也可以把本地的tomcat上传到服务器。 具体操作步骤如下: 创建一个tomcat目录,位置可以根据自己情况选择 将上传的tomcat复制到上面目录 进入tomcat目录 解压tomcat 进入tomcat的bin目录 启动tomcat 关闭tomcat 删除

    2024年02月01日
    浏览(47)
  • vite+vue3+ts项目上线docker 配置反向代理API

    这次重点的坑是反向代理。 1。项目中配置代理,为了跨域请求数据 项目根目录中新建vite.config.ts文件 在文件中添加配置代理 注意:其中 \\\'/api\\\' 和target 的地址后面没有 \\\'/\\\' 2。在项目根目录中新建Httprequest.ts文件,引入axios,并封装请求 引入axios就不多说了,npm自行安装就好 注

    2024年02月20日
    浏览(53)
  • 【尚医通】vue3+ts前端项目开发笔记 2 —— 创建项目、封装网络请求、集成elment-plus 、重置样式、准备状态管理/路由 等开发前准备

    服务器地址:http://syt.atguigu.cn 医院接口:http://139.198.34.216:8201/swagger-ui.html 公共数据接口:http://139.198.34.216:8202/swagger-ui.html 会员接口:http://139.198.34.216:8203/swagger-ui.html 短信验证码接口:http://139.198.34.216:8204/swagger-ui.html 订单接口:http://139.198.34.216:8206/swagger-ui.html 文件上传接口:

    2024年02月13日
    浏览(49)
  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(50)
  • vue3 项目打包后白屏

    根据Vue3.x文档,在 vue.config.js/vite.config.ts 统一对webpack、跨域、端口号等属性进行配置。 1.在 vue.config.js/vite.config.ts添加publicPath属性并将值更改成 ‘./’ 在这里插入图片描述 2.若还没有解决就去路由中将history模式设置成默认的Hash模式, 一般是服务器后端配置之后才使用hist

    2024年02月16日
    浏览(44)
  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十一章 基础界面开发 (组件封装和使用)

    Vue 是前端开发中非常常见的一种框架,它的易用性和灵活性使得它成为了很多开发者的首选。而在 Vue2 版本中,组件的开发也变得非常简单,但随着 Vue3 版本的发布,组件开发有了更多的特性和优化,为我们的业务开发带来了更多便利。本文将介绍如何使用 Vue3 开发业务组件

    2024年02月19日
    浏览(83)
  • vue3 + vite 多项目多模块打包

    vue3 + vite 多项目多模块打包 本示例基于 vite-plugin-html 插件,实现多个独立项目共存,共享组件和依赖,运行、打包互不干扰。 兼容性注意 Vite 需要 Node.js 14.18+、16+版本,有些模板需要更高的版本 虽然创建项目用的14.17.5版本,但是后面运行项目用的18.15.0 HTML模板插件 打包一

    2024年02月10日
    浏览(66)
  • vue3项目打包后整合到springboot项目中运行

    一般来说,前后端分离项目,比如vue3+springboot的前后端分离项目,一般把vue3项目打包后部署到nginx或者tomcat上面,springboot项目单独打包。 那如果想把vue3项目打包后直接部署到springboot项目中,如何做那? 创建vue项目 创建项目 安装依赖 启动开发服务器(项目目录) 如果要部

    2024年02月05日
    浏览(32)
  • Vue3 - vite 引入本地图片方法,页面引入本地静态资源图像详细教程,解决 UI 前端组件库的图片属性无法使用本地图像问题(无论是本地开发还是打包部署,本地图片的路径正常可用)

    在 webpack 中通常用 require() 来引入静态图片,但在 vite 中这种方法就不行了。 本文实现了 在 vue3+vite 项目开发中,实现引入本地图片(静态资源),并且 build 打包后依然正常运行, 支持普通 img 标签使用,也支持 UI 组件库的各种 “图片属性” 当参数进行使用。 如下图所示

    2024年02月08日
    浏览(67)
  • vite vue3项目打包,跳过ts检查

    遇到这个问题是因为vue文件中script标签没有写lang造成的  剩下的ts类型检查错误  \\\"build\\\": \\\"vue-tsc --noEmit --skipLibCheck vite build\\\",是因为这个vue-tsc打包对ts进行了类型检查,需要全部解决了才行,可以关闭,直接改成\\\"build\\\": \\\"vite build\\\",

    2024年02月16日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包