vue项目中引入外部css以及js文件的方法

在使用vue做项目的时候，我们一般不将css样式写到各自的组件里，这样不仅会让代码冗余，而且不美观整洁。如果你定义了一些外部css文件，如何引入到vue组件中去呢？我们这里使用ES6的引入方式：

<template></template>
<style scoped>

 @import "../assets/common/common.css";

</style>

那么JS文件如何引入呢？如果需要全局使用，则可以在main.js中引用并实例化对象：

部分js代码：
const DEBUG = true;
let BASE_URL = DEBUG ? 'url' : '';
const API = {
    //网关设备管理
    'edgeManager':{
        'deviceList':BASE_URL + '/devicemanager/device/list.do',//网关设备列表
        'deviceDelete':BASE_URL + '/devicemanager/device/delete.do'//网关设备删除
    }
}
export default API;

在main.js中：

import API from './assets/api/api.config.js'
Vue.prototype.$API = API;

这样，我们在vue组件中使用this.$API就可以找到这个js文件中的对象了。
如：this.$API.edgeManager.deviceList

如果需要按需引入，不在main.js中引入，直接在有需要的vue组件中引入：

部分代码：
<template></template>
<script>
import API from '../../assets/api/api.config.js'
</script>

这样引入的话，我们在当前组件可以直接使用API去找到这个js文件中的对象。
如：API.edgeManager.deviceList

需要注意的是，第二种方式按需引入的js文件在其他组件中是找不到这个对象的。

欢迎交流探讨，希望本篇文章对你有所帮助。