vue-cli + webpack：在哪里包含 npm 包 js 和 css 文件？

Question

我正在尝试将 npm 包导入我的 vue-cli 开发站点。这里是包网站提供的instructions：

它说它需要在代码中的某处包含 css 和 js 文件。我该怎么做？

我猜 css 文件是通过将其放入 App.vue:

中包含的

<style>
  @import '../node_modules/swiper/dist/css/swiper.min.css';
....
</style>

是吗？我将如何包含 .js 文件？ App.vue 内，还是 main.js 内？老实说，我也不确定它的语法会怎样。

这是我的 index.html 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="build/swiper.min.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="build/swiper.min.js"></script>
  </body>
</html>

Answer 1

您可以像普通 js 和 css

一样在 build/index.html 中包含这些文件

<head> 
....
 <link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
 <script defer src="path_to_js/idangerous.swiper-2.x.min.js"></script> 
.... 
</head>

Answer 2

这似乎有效 - 在我的 main.js 文件中，我包含了 js 和 css 文件，如下所示：

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

据我所知，这是将 npm 包正确地导入到项目中用于开发和生产。

vue-cli + webpack：在哪里包含 npm 包 js 和 css 文件？

vue-cli + webpack: where to include npm package js and css files?

node.js

npm

vue.js

npm-install

vue-cli