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

Posted 2023-02-22

【中文标题】在 vue cli3 项目中包含我自己的 js 和 css 文件

【英文标题】：Including my own js and css file in a vue cli3 project

【发布时间】：2019-07-07 08:39:02

【问题描述】：

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

【问题讨论】：

import x from y?

也许你可以在索引文件中导入它

【参考方案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';

【讨论】：

如果有帮助，也请考虑对答案进行投票:)

【参考方案2】：

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

See: Working with CSS

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

See: CSS Modules

对于 JavaScript，如果您使用的是 ES2016/ES6，则非常简单，只需使用语法

import tool from 'toolmodulename';

【参考方案3】：

在 main.js 中试试这个

导入“path-your-css/your-css.css”；