Vue3打包部署报错的解决方案
更新时间：2022年06月02日 14:10:01 作者：吃素鸡的鹅
这篇文章主要介绍了Vue3打包部署报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue3打包部署报错
通常情况下，我们直接npm run build后的代码可以直接部署在服务器上，以便老板远程访问。但是今天写了个简单的demo发现部署后不能直接访问。作为一个菜鸟，被领导催的也是心急如焚。
但奇怪的是，vscode的open live server却没有任何问题。
冥思苦想苦思冥想无法解决，问了同事大佬，原来是要在打包前的vue config下加一下publicPath：‘./’：
于是重新打包，再部署到服务器，解决啦！！！
知其然还要知其所以然，我们看一下官网的解释：
- 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
- 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
- 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
vue3 vite 打包部署后,访问报错
Expected a JavaScript module script but the server responded with a MIME type of
其实这个很简单：
在vite.config.js中：
将base对应的属性从'./'改为'/'即可
import { defineConfig, loadEnv, ConfigEnv } from 'vite';
const viteConfig = defineConfig((mode: ConfigEnv) => {
const env = loadEnv(mode.mode, process.cwd());
return {
plugins: [vue()],
root: process.cwd(),
resolve: { alias },
base: '/',
};
});以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue开发设计分支切换与cleanup实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了关于Vue ui 的没反应、报错问题解决总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要给大家介绍了关于vue项目中按钮防抖处理实现的相关资料,在项目开发中相必大家时常会遇到按钮重复点击后引起事件重复提交的问题,需要的朋友可以参考下2023-08-08
本文主要介绍了Vue3中简单实现动态添加路由，，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
前端vue框架select下拉数据量过大造成卡顿问题解决办法
这篇文章主要给大家介绍了关于前端vue框架select下拉数据量过大造成卡顿问题解决办法,文中通过示例代码介绍的非常详细,对大家学习或者使用select具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣命周期2022-10-10
这篇文章主要介绍了vue使用$http服务端收不到参数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
解读element el-upload上传的附件名称不显示 file-list赋值
这篇文章主要介绍了解读element el-upload上传的附件名称不显示 file-list赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了详解使用vue实现tab操作,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了vue实现一个单独的组件注释，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论