vue项目打包报错,vue打包错误

　　本文主要介绍了Vue3包部署错误的解决方法，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

目录

　　 Vue3包部署报告了一个错误。vue3 vite包部署后，access报告了一个错误。

Vue3打包部署报错

　　通常我们直接npm运行构建后的代码可以直接部署在服务器上，这样老板就可以远程访问了。但是今天我写了一个简单的演示，发现部署后无法直接访问。作为菜鸟，被领导催着也是着急。

　　然而奇怪的是，vscode的open live服务器并没有任何问题。

　　想了半天也解不出来，就问了同事，结果发现还得加上publicPath:。/.打包前vue配置下的“/”:

　　于是重新打包，然后部署到服务器，解决了！

　　知其然还要知其所以然，我们看一下官网的解释：

　　部署包时的基本URL。用法与webpack本身的output.publicPath一致，但Vue CLI在其他一些地方也需要这个值，所以请始终使用publicPath，而不是直接修改webpack的output.publicPath。默认情况下，Vue CLI将假设您的应用程序部署在域名的根路径上，例如https://www.my-app.com/.如果应用程序部署在子路径上，您需要使用此选项指定此子路径。例如，如果您的应用程序部署在https://www.my-app.com/my-app/#xff0c;则将publicPath设置为/my-app/。该值也可以设置为空字符串(“”)或相对路径(“”)。/)，这样所有资源将作为相对路径链接，并且类型化的包可以部署在任何路径中。

vue3 vite 打包部署后，访问报错

　　应为JavaScript模块脚本，但服务器响应的MIME类型为

　　其实，这很简单：

　　在vite.config.js中：

　　只需更改base from 对应的属性。/到/

　　从“vite”导入{ defineConfig，loadEnv，ConfigEnv }；

　　const vite config=define config((mode:ConfigEnv)={

　　const env=loadEnv(mode.mode，process . CWD())；

　　返回{

　　插件：[vue()]，

　　root: process.cwd()，

　　解析：{ alias }，

　　基底：/，

　　};

　　});

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。