VueJS在主文件中导入本地和外部脚本和css文件答案

【问题标题】：VueJS importing local and external script and css files in main fileVueJS在主文件中导入本地和外部脚本和css文件
【发布时间】：2018-08-17 19:51:34
【问题描述】：

我正在尝试将脚本和 css 文件导入到我的 vuejs 应用程序的 index.html 文件中。
我的文件结构如下：

vueapp/
├──index.html
└── src/
└── 资产/
└── css/
└── 图片/
└── js/
└── 插件/

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Gaming</title>
    <!-- vendor css -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="/assets/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/plugins/animate/animate.min.css">
    <!-- plugins css -->
    <link href="/assets/plugins/owl-carousel/css/owl.carousel.min.css" rel="stylesheet">
    <!-- theme css -->
    <link rel="stylesheet" href="/assets/css/theme.min.css">
    <link rel="stylesheet" href="/assets/css/custom.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>    
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

当我尝试打开其中一个文件时，它们只是作为 vue 路由加载而不会显示实际文件。
有什么想法吗？

【问题讨论】：

这完全取决于你的服务器是如何设置的。
我在 webpack 中使用vue-cli
您如何提供静态文件？静态文件服务和正在服务的应用程序路由之间需要有所区别。
那么static 文件夹可能是您应该使用的。 vuejs-templates.github.io/webpack/static.html
@JacobGoh 谢谢，我会调查的。

标签： javascript html css vue.js vuejs2

【解决方案1】：

如果您想使用现有的 CSS 文件，请将您的 CSS 文件放在 /static 文件夹中，并将您的 URL 编辑为 /static/path/to/css。

无法从 URL 访问资产文件夹（因为它不是静态的）。

【讨论】：