Vue3打包部署报错的解决方案

目录
  • Vue3打包部署报错
  • vue3 vite 打包部署后,访问报错

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: '/',
    };
});

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

赞 (0)

相关推荐

  • Vite vue3多页面入口打包以及部署踩坑实战

    Vite vue3多页面入口打包以及部署踩坑实战

    目录 为什么需要多入口? 一.改造项目 二.vite.config.ts配置 三.部署 总结 为什么需要多入口? 公司原生的移动端上需要用webview引入一些性能要求不高的H5页面,初步考虑后选择用vue试个水,前期页面跳转选择使用vue-router,测试过程中在安卓高版本下右滑返回效果尚可,ios端初步尝试使用的最左侧touch事件移动距离检测以及router判断index添加过场动画,但是整体的效果依然达不到下图的效果. 原先项目中是使用多个html页面以及原生自带的协议去打开html,

  • 解决vue打包报错Unexpected token: punc的问题

    项目中有一个功能模块是使用Vue写的,然后蛋疼的来了,写Vue的同事走了,今天需要改,懵逼状态啊,这是什么?代码还没看懂,就给我出了一个Exception.记录一下,蛋疼历程. ERROR in static/js/app.33254a875dd731a0b538.js from UglifyJs Unexpected token: punc (() [./src/mixin/mixin.js:6,8][static/js/app.33254a875dd731a0b538.js:13,19] 好

  • Vue3项目打包后部署到服务器 请求不到后台接口解决方法

    本地开发没问题能正常请求到接口,部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题. 经过查询得知:Remote Address代表的是当前HTTP请求的远程地址,即HTTP请求的源地址. 我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的,而部署到服务器后相当于换了个环境( ip地址和端口已经改变 ),此时proxy代理就出错了. 解决方法: 地址错误了,那就

  • Vue3打包部署报错的解决方案

    Vue3打包部署报错的解决方案

    目录 Vue3打包部署报错 vue3 vite 打包部署后,访问报错 Vue3打包部署报错 通常情况下,我们直接npm run build后的代码可以直接部署在服务器上,以便老板远程访问.但是今天写了个简单的demo发现部署后不能直接访问.作为一个菜鸟,被领导催的也是心急如焚. 但奇怪的是,vscode的open live server却没有任何问题. 冥思苦想苦思冥想无法解决,问了同事大佬,原来是要在打包前的vue config下加一下publicPath:‘./’: 于是重新打包,再部署到服

  • 解决MyEclipse10.7部署报错抛空指针异常问题的方法

    解决MyEclipse10.7部署报错抛空指针异常问题的方法

    先对问题进行描述: (1)在MyEclipse Servers视图在MyEclipse 10.7.0在某些情况下,可能无法打开. 试图打开视图将导致NPE将被记录. Could not create the view: An unexpected exception was thrown. java.lang.NullPointerException at com.genuitec.eclipse.ast.deploy.core.Deployment.(Unknown Source) at co

  • 关于IntelliJ IDEA 打包代码报错的问题

    关于IntelliJ IDEA 打包代码报错的问题

    一.问题由来 使用 IntelliJ-IDEA 打包项目一直以来都没问题,可是上周的时候,突然打包就报错了,并且Maven中的pom.xml文件确定是没有改过,打包的配置文件也没有修改过. 报错信息如下: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) on project 项目名称: Compilation failure: Compilati

  • Vue3刷新页面报错404的解决方法

    Vue3刷新页面报错404的解决方法

    vue-router历史模式 最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router

  • Vue3格式化Volar报错的原因分析与解决

    Vue3格式化Volar报错的原因分析与解决

    目录 问题描述 原因分析: 解决方案: 总结 问题描述 今天在新建一个Vue3项目的时候,vscode突然提示报错,如下: The 1 extension(s) below, in workspace recommendations have issues: johnsoncodehk.volar (not found in marketplace) 原因分析: 百度了一下,网上并没有任何类似的例子和结局方案 首先根据英语提示,翻译报错原因是因为 工作区推荐的 johnsoncodehk.vol

  • Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)

    目录 1.git下载源码运行打包dist 2.将dist文件引入项目 3.应用 4.常见报错 1.git下载源码运行打包dist git 源码地址:https://github.com/mengshukeji/Luckysheet 下载好源码之后执行 npm install npm install gulp -g //跑去源码看看正常与否 npm run dev //如果正常执行打包 npm run build 打包结束后在目录下找到 dist 文件 2.将dist文件引入项目 将dist离线包

  • SpringBoot集成MybatisPlus报错的解决方案

    SpringBoot集成MybatisPlus报错的解决方案

    这篇文章主要介绍了SpringBoot集成MybatisPlus报错的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 启动的时候总是报如下错误: java.lang.annotation.AnnotationFormatError: Invalid default: public abstract java.lang.Class 解决方案 需要一个mybatis-spring-boot-starter的包,在pom文件加上之后,完

  • vue 解决uglifyjs-webpack-plugin打包出现报错的问题

    楼主最新对已做项目进行打包优化,配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin 具体代码如下 npm install uglifyjs-webpack-plugin -D const UglifyJsPlugin = require('uglifyjs-webpack-plugin') configureWebpack: config => { if (isProduction) { config.plugins = config.pl

  • mybatis不加@Parm注解报错的解决方案

    我的idea版本2017.3.4,低版本貌似不会加上这个配置,idea高版本会 补充知识:Mybatis传多个参数的问题 及MyBatis报错 Parameter '0' not found. Available parameters are [arg1, arg0, param1 问题 对于使用Mybatis ,传多个参数,我们可以使用对象封装外,还可以直接传递参数 对象的封装,例如查询对象条件basequery对象 <select id="getProductByProductQuer

  • Django migrate报错的解决方案

    Django migrate报错的解决方案

    前言 在讲解如何解决migrate报错原因前,我们先要了解migrate做了什么事情,migrate:将新生成的迁移脚本.映射到数据库中.创建新的表或者修改表的结构. 问题1:migrate怎么判断哪些迁移脚本需要执行? 它会将代码中的迁移脚本和数据库中django_migrations中的迁移脚本进行对比,如果发现数据库中,没有这个迁移脚本,那么就会执行这个迁移脚本. 问题2:migrate做了什么事情 将相关的迁移脚本翻译成SQL语句,在数据库中执行这个SQL语句. 如果这个SQL语句执行没

随机推荐