VUE CLI - 如何导入脚本和样式答案

【问题标题】：VUE CLI - How to import scripts and stylesVUE CLI - 如何导入脚本和样式
【发布时间】：2019-03-11 07:02:37
【问题描述】：

我一直在尝试将本地样式和 javascript 文件导入我新创建的 VUE-CLI 3 应用程序（在 public/index.hml 中），但它们没有反映在我的组件中。

使用 Vue-cli 2 就可以了。

我们不应该在 public/index.hml 中导入 css 和样式吗请问我如何让它工作？请帮忙。

请参阅下面我如何引用 public/index.html 文件中的文件

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-cameleon</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">

    <!-- Common CSS -->
    <link rel="stylesheet" href="../src/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../src/assets/fonts/icomoon/icomoon.css" />
    <link rel="stylesheet" href="../src/assets/css/main.css" />

    <!-- Other CSS includes plugins - Cleanedup unnecessary CSS -->
    <!-- Chartist css -->
    <link href="../src/assets/vendor/chartist/css/chartist.min.css" rel="stylesheet" />
    <link href="../src/assets/vendor/chartist/css/chartist-custom.css" rel="stylesheet" />

【问题讨论】：

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

您可以将它们导入main.js，如下所示：

  import './assets/css/bootstrap.min.css';
  import  './assets/css/main.css'
  ....

或App.vue：

 <template>...</template>
 <script>...</script>
 <style src='./assets/css/bootstrap.min.css'></style>
 <style src='./assets/css/main.css'></style>

【讨论】：

但是，当我尝试导入繁重的外部 css 文件和 javascript 库时，我收到此错误消息 ./src/assets/fonts/opensans/opensans-regular-webfont.html 模块解析失败：意外token (1:0) 您可能需要适当的加载程序来处理此文件类型。 | | | 知道为什么以及可能的解决方案吗？

【解决方案2】：

使用 vue-cli v4，转到您的 main.js 文件并像这样添加 js/css 文件的导入

import './assets/main.js'
import './assets/main.css'

并确保您已将这些文件放入项目的 assets 文件夹中！

【讨论】：