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

发布时间:2023-11-03 09:00

Vue3打包部署报错

通常情况下,我们直接npm run build后的代码可以直接部署在服务器上,以便老板远程访问。但是今天写了个简单的demo发现部署后不能直接访问。作为一个菜鸟,被领导催的也是心急如焚。

但奇怪的是,vscode的open live server却没有任何问题。

冥思苦想苦思冥想无法解决,问了同事大佬,原来是要在打包前的vue config下加一下publicPath:‘./’:

Vue3打包部署报错的解决方案_第1张图片

于是重新打包,再部署到服务器,解决啦!!!

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

  • 部署应用包时的基本 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: '/',
    };
});

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号