vue-cli项目引用外部CSS和JS

引用外部CSS

全局引用css

方法一：

①将公共css文件放到src/assets/css文件夹中
②在main.js文件中引入

import './assets/css/gloable.css';

方法二：

在框架模板public/index.html文件种引用
1、css文件在public/css文件夹下，link路径为：

<link rel="stylesheet" href="./css/gloable.css">

2、css文件如果是在src/assets/css文件夹下，link路径为：

<link rel="stylesheet" href="<%= BASE_URL %>css/gloable.css">

单文件引入CSS

在 .vue 文件末尾写入<style> </style>标签，然后通过@import “css文件URL”;引入css，也可以在style中写入多个@import ，示例如下：

<template>
·
·
·
</template>
<style>
	@import "css/home.css";
	@import "css/test.css";
</style>

注： css文件在src/views/css文件夹下

引用外部JS

全局引用JS

在框架模板public/index.html文件种引用
1、JS文件在public/js文件夹下，引用路径为：

<script src="./js/test1.js"></script>
<script src="./js/test2.js"></script>

2、JS文件在src/assets/js文件夹下，引用路径为：

<script src="<%= BASE_URL %>js/test1.js"></script>
<script src="<%= BASE_URL %>js/test2.js"></script>

单页面引用JS

方法一：

通过操作DOM创建 <script> </script> 标签引入外部JS，示例如下：

<script>
	name: "test",
	mounted(){
		let script = document.createElement('script');
		script.type = 'text/javascript';
  		script.src = './js/test.js';
  		document.body.appendChild(script);
 		this.$message.success('success')
	}
</script>

注：test.js文件在public/js文件夹下

方法二：

通过import {*} from “js文件URL”，示例如下：

<script>
	import { test} from './js/test.js'
</script>

注：test.js文件在public/js文件夹下