Question

我正在尝试将现有项目移植到Vue。由于我需要添加单元测试和集成测试，因此需要通过npm start作为Vue应用（而不是纯JavaScript）启动它。

我有以下基本HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>please-help-me</title>
  </head>
  <body>
    <div id="vue-app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

然后 App.vue 尝试向HTML正文底部注入<script src=...></script>：

export default {
  name: 'App',
  created () {
    this.addExternalScript('https://unpkg.com/axios/dist/axios.min.js')
    this.addExternalScript('assets/js/core/modernizr.min.js')
  },
  methods: {
    addExternalScript (scriptPath) {
      const ckeditor = document.createElement('script')
      ckeditor.async = true
      ckeditor.setAttribute('src', scriptPath)
      document.body.appendChild(ckeditor)
    }
  }

两个脚本标记均正确生成（通过查看生成的HTML的源代码）：

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

但是接下来我得到第二个错误，即 local 脚本：

未捕获到的SyntaxError：意外令牌<< / p>

链接后面的完整路径是正确的，但是，如果我将其复制并粘贴到Web浏览器地址中，则会重定向到默认页面HTML。这就是上面错误的原因，html以<字符开头。

到目前为止，我已经尝试过：

将路由添加到路由器。尝试将路径添加到脚本以及所有脚本的根路径“ assets /”
调整Vue的路由器：定义router.beforeEach(to, from ...)时，我从未获得脚本的路径，因此无法重定向它。
将其添加到html的正文和头部
在ckeditor.async = true App.vue方法中使用和不使用addExternalScript
带和不带路由器的Vue应用
使用了here中的<script2>。结果是它生成了一个指向app.js的链接
试图将资产文件夹移动到构建文件夹。

仅在使用CDN（或任何外部路径）时有效。经过1.5天和六个不同的项目，我求助于您。

在Vue中使用脚本html标签获取本地存储的外部脚本

0 个答案: