Vue引用public中的js文件

最新推荐文章于 2024-10-12 18:23:18 发布

mini韦

最新推荐文章于 2024-10-12 18:23:18 发布

阅读量1.5w

点赞数 4

分类专栏： vue 文章标签： css css3 vue

本文链接：https://blog.csdn.net/w6718189/article/details/121661301

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

背景

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

步骤

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

let config = [
  // window.config = [
  {
    title: '智能指挥中心1',
    content: [
      {
        labe: '全视通（包含商事可视化）',
        url: 'http://www.baidu.com/'
      },
      {
        labe: '任务处置',
        url: 'http://www.baidu.com/'
      },
      {
        labe: '指挥调度',
        url: 'http://www.baidu.com/'
      },
      {
        labe: '应急管理',
        url: 'http://www.baidu.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>
    <!-- built files will be auto injected -->
  </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);
    }
  }
};