Vue JS 构建不导入 CSS 文件

Posted 2023-02-23

【中文标题】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 文件夹的内容