在一个vue cli3项目中包含我自己的js和css文件

Question

我有几个自定义构建的 js 和 css 文件，我想将其包含到我的 vue cli3 项目中。有什么方法可以将这些文件导入到我的项目中吗？

Answer 1

对于自定义 js 文件，将所有逻辑写入一个对象并在文件末尾导出：

const customJs = {
   /* custom javascript here */
}

export default customJs;

然后将其导入到您需要的位置：

import * as customJs from '../path/to/file.js'

对于自定义 css 文件，您可以在 style 标签之间使用 @import，如下所示：

@import './../node_modules/foo/bar.css';

Answer 2

你可以在使用vue-cli创建项目时使用预处理器。

或者，如果您不需要预处理器并且您正在使用 CSS 模块，您可以选择这条路线

至于 JavaScript 如果您在 ES2016/ES6 上，则非常简单，只需使用语法

import tool from 'toolmodulename';

Answer 3

在 main.js

试试这个

进口"path-your-css/your-css.css";

Including my own js and css file in a vue cli3 project