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

这似乎有效 - 在我的main.js文件中，我已经包含了这样的js和css文件：

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

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

Answer 2

您可以将这些文件包含在build/index.html中，例如常见的js和css

<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>

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

2 个答案: