Vue 构建时字体包文件丢失

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 构建时字体包文件丢失相关的知识,希望对你有一定的参考价值。

参考技术A 原本项目执行构建命令,字体包能正确输出到指定位置,但是随着打包的文件增加,发现 dist/fonts 文件夹内字体包丢失了

使用 vue inspect 检查配置,结果:

猜测是 limit 过小导致的,在 vue.config.js 修改配置

执行构建,字体包正确输出~

Vue JS 构建不导入 CSS 文件

【中文标题】Vue JS 构建不导入 CSS 文件【英文标题】:Vue JS Build not Import CSS Files 【发布时间】:2021-02-25 18:19:26 【问题描述】:

我导入到我的 Vue 项目并在“npm run serve”部分运行的 CSS 代码在“npm run build”之后在我的服务器上不起作用。这可能是什么原因?当我在本地计算机上打开dist文件中的索引文件时,它说CSS丢失,并没有说服务器上有任何错误。

main.js

import Vue from 'vue'
import App from './App.vue'
import VRouter from './router'
import VStore from './configurations/storeConfiguration'
import V18n from './configurations/languageConfiguration'

// Special CSS Library ( UA )
import "./assets/scss/ua.css";

出现的 CSS 文件出现在开发环境中。但是,它不会出现在服务器环境中。

package.json

  
      "name": "driver",
      "version": "0.1.0",
      "private": true,
      "sideEffects": false,
      "scripts": 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      ,
      "dependencies": 
        "@fortawesome/fontawesome-svg-core": "^1.2.32",
        "@fortawesome/free-solid-svg-icons": "^5.15.1",
        "@fortawesome/vue-fontawesome": "^2.0.0",
        "axios": "^0.20.0",
        "bootstrap": "^4.5.3",
        "bootstrap-vue": "^2.17.3",
        "core-js": "^3.6.5",
        "epic-spinners": "^1.1.0",
        "node-sass": "^4.14.1",
        "sass": "^1.27.0",
        "sass-loader": "^10.0.3",
        "scriptjs": "^2.5.9",
        "sweet-modal-vue": "^2.0.0",
        "v-mask": "^2.2.3",
        "vue": "^2.6.12",
        "vue-analytics": "^5.22.1",
        "vue-ctk-date-time-picker": "^2.5.0",
        "vue-i18n": "^8.22.0",
        "vue-input-mask": "0.0.11",
        "vue-router": "^3.4.7",
        "vue-suggestion": "^1.1.0",
        "vue-sweetalert2": "^4.0.0",
        "vue-the-mask": "^0.11.1",
        "vue-toastification": "^1.7.8",
        "vuex": "^3.5.1"
      ,
      "devDependencies": 
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "vue-template-compiler": "^2.6.11"
      ,
      "eslintConfig": 
        "root": true,
        "env": 
          "node": true
        ,
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "parserOptions": 
          "parser": "babel-eslint"
        ,
        "rules": 
      ,
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    

【问题讨论】:

【参考方案1】:

首先要做的事情: npm run serve 不提供 dist 文件的内容 检查:How to run production site after build vue cli

您介意显示一些代码以便我们分析您的问题吗?

【讨论】:

尝试将 css 导入您的 index.html 文件 当我这样做时,我的测试环境中的 CSS 代码也不起作用。它发生在服务器上。 我也把SRC文件夹发到服务器了,问题解决了。谢谢你.. 我只在静态服务器上部署了 nuxt 应用,我从来不用部署 src 文件夹,只部署 dist 文件夹的内容

以上是关于Vue 构建时字体包文件丢失的主要内容,如果未能解决你的问题,请参考以下文章

Vue+elementUI npm run build打包之后字体 图标丢失问题

canvas文字丢失

当我在 vue 组件上输入另一个输入时,为啥输入文件的值丢失?

java中使用itextPdf生成pdf文件 其中有个别特殊文字丢失 例如: 喆 求大能解决!!!!

如何修复 PDF 文件并嵌入丢失的字体

尝试在从外部项目(上一级)导入类型时构建 Firebase 函数项目。 `tsc` 编译后丢失文件夹结构