在 Vuejs + Laravel 中将 src 属性添加到模板标签时出现问题

Question

我用 Vuejs 开始了一个项目，Laravel 使用 Laravel Mix。它在大多数情况下都有效，但是当我尝试将我的组件分成单独的文件并将它们加载到 .vue 文件中时，如下所示：

<template src="./comp.html"></template>
<script src="./comp.ts" lang="ts"></script>
<style src="./comp.scss" scoped lang="scss"></style>

我收到这个错误：

 error  in ./resources/js/components/comp/comp.html?vue&type=template&id=c2090546&scoped=true

Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):

VueCompilerError: Unquoted attribute value cannot contain U+0022 ("), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).
at /home/geordyd/projects/pension-tool/htdocs/resources/js/components/comp/comp.html:2:35
1  |  // Module
2  |  var code = "<section class=\"comp\">\n  <h1>comp Component</h1>\n</section>\n\n";
   |                                    ^
3  |  // Exports
4  |  module.exports = code;

我在浏览器中得到这个输出：

package.json:

{
    "private": true,
    "scripts": {
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.3",
        "axios": "^0.19",
        "bootstrap": "^4.5.3",
        "cross-env": "^7.0.2",
        "jquery": "^3.5.1",
        "laravel-mix": "^6.0.0-beta.14",
        "lodash": "^4.17.19",
        "node-sass": "^5.0.0",
        "postcss": "^8.1.10",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.29.0",
        "sass-loader": "^10.1.0",
        "vue-class-component": "^8.0.0-0",
        "vue-loader": "^16.0.1"
    },
    "dependencies": {
        "@types/webpack-env": "^1.16.0",
        "@vue/cli-plugin-typescript": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "core-js": "^3.6.5",
        "ts-loader": "^8.0.11",
        "typescript": "~3.9.3",
        "vue": "^3.0.3",
        "vue-cli-plugin-vue-next": "^0.1.4"
    }
}

tsconfig.json:

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "types": [
            "webpack-env"
        ]
    },
    "types": [
        "webpack-env"
    ],
    "include": [
        "resources/js/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

webpack.mix.js:

const mix = require('laravel-mix');

mix.ts('resources/js/app.ts', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css');

我尝试降级 vue-loader 包，但没有成功。

将 comp.html 更改为 var code = '<section class="comp"><br><h1>comp Component</h1><br></section><br><br>' 在浏览器中给出以下输出：

Answer 1

我认为你必须在 src 中使用 require。

<template :src="require('./comp.html')"></template>
<script :src="require('./comp.ts"') lang="ts"></script>
<style :src="require('./comp.scss"') scoped lang="scss"></style>

Answer 2

Laravel 混合有问题。
开发者已经修复了它。

Link 到 github 问题： https://github.com/JeffreyWay/laravel-mix/issues/1893#event-4074240275

在 Vuejs + Laravel 中将 src 属性添加到模板标签时出现问题

Problem with adding src attribute to template tag in Vuejs + Laravel

laravel

typescript

webpack

vue.js

laravel-mix