Question

因此，我在_.extend中构建了一个单页应用程序，效果很好，但是 SEO 如预期的那样糟糕，因此我决定制作一个普通的HTML网站，其中某些页面包含{{1} }代码（远程托管，因此没有其他节点可以进入SSR）。

我关注了this guide，它运行正常

我有一个VueJS，其中包含我的VueJS实例和方法等

search.js

但是，我需要导入诸如axios和其他组件之类的东西

如果我在上面的脚本中添加了一个import语句，它将附带

VueJS

未捕获的SyntaxError：意外的标识符

我的进口货应该去哪里？

Answer 1

由于您是直接编写在浏览器中运行的代码，因此可以在加载axios之前在HTML代码中简单地包含search.js cdn：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

关于组件导入，您可以阅读有关component registration here的更多信息。通常，如果您的组件是通过Vue.component('my-component', {})语法在全球范围内注册的，则您应该能够在代码中直接使用它。

Answer 2

您缺少axios库，因此请按以下步骤添加它：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

我还为您提供了使用浏览器时的使用方法：

new Vue({
  el: '#app',
  data: {
    dataReceived: '',
  },
  methods: {
    getData() {
      axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
        .then((response) => {
          this.dataReceived = response.data;
          console.log(this.dataReceived);
          return this.dataReceived;
        })
    }
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
  <div id="app">
    <button @click="getData" type="button">getData</button>
    <p>dataReceived: {{ dataReceived }}</p>
  </div>
</body>

VueJS：添加到现有的HTML并处理导入

2 个答案: