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

【问题标题】：vue-cli + webpack: where to include npm package js and css files?vue-cli + webpack：在哪里包含 npm 包 js 和 css 文件？
【发布时间】：2017-12-12 09:49:09
【问题描述】：

我正在尝试将一个 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>

【问题讨论】：

标签： node.js npm vue.js npm-install vue-cli

【解决方案1】：

你可以将这些文件包含在build/index.htmllike common js and 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>

【讨论】：

不幸的是，这会在开发模式下引发 404 错误。
你可以把这两个文件放到build foler中，
对不起，你提醒我后才看到代码，是我的错；你应该使用相对路径，<link rel="stylesheet" href="./swiper.min.css"><script src="./swiper.min.js"></script>

【解决方案2】：

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

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

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

【讨论】：