Vue引用public的js文件

武飞扬头像

mini韦

2024-03-14 帮助3人

背景

由于一些演示，需要对一些简单页面进行配置，由于打包build后的vue项目基本已经看不出原样，因此需要创建一个文件，并在打包的时候不会进行编译。所以文件放在public。

步骤

1.在public文件夹下创建config.js文件用window.config 这样方式挂载也是可以的，或者直接定义变量。

let config = [
// window.config = [
{
title: '智能指挥中心1',
content: [
{
labe: '全视通（包含商事可视化）',
url: 'http://www.百度.com/'
},
{
labe: '任务处置',
url: 'http://www.百度.com/'
},
{
labe: '指挥调度',
url: 'http://www.百度.com/'
},
{
labe: '应急管理',
url: 'http://www.百度.com/'
}
]
}
];

学新通

2.在public文件夹html文件下，使用<scrtipt>标签进入。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
//通过script引用
<script src="config.js"></script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>scw-cli</title>
</head>
<body>
<noscript>
<strong
>We're sorry but scw-cli doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
</body>
</html>

学新通

3 直接用

export default {
name: 'Home',
data() {
return {
loading: false,
data: config
// data: window.config //两种方式都可以
};
},
methods: {
go(url) {
window.open(url);
console.log(config);
}
}
};

学新通

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhffjgaf

系列文章

同类精品

继续加载