Question

我使用https://github.com/MarkPieszak/aspnetcore-Vue-starter#getting-started

中的SPA模板创建了一个新的.net核心项目。

与dotnet new vuejs

用npm install还原软件包后，我可以成功打开项目并从Visual Studio中运行它。

我现在想通过在/ ClientApp / components / about /中添加about.vue文件来使用单个文件组件。

我将app.ts更改为使用

@Component({
    components: {
        MenuComponent: require('../navmenu/navmenu.vue.html'),
        AboutComponent: require('../about/about.vue')
    }
})

现在运行应用程序时出现错误

ERROR in ./ClientApp/components/about/about.vue
Module parse failed: C:\playground\vue-journey\ClientApp\components\about\about.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <div class="about">
|         <h1>This is an about page</h1>
 @ ./~/awesome-typescript-loader/dist/entry.js?silent=true!./ClientApp/components/app/app.ts 30:28-57
 @ ./ClientApp/components/app/app.vue.html
 @ ./ClientApp/boot.ts
 @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts

我没有更改webpack.config，因为对我来说它似乎具有所需的加载器。

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    return [{
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        entry: { 'main': './ClientApp/boot.ts' },
        module: {
            rules: [
                { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
                { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: 'dist/'
        },
        plugins: [
            new CheckerPlugin(),
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
                }
            }),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin('site.css')
        ])
    }];
};

我该怎么做才能编译单个文件组件？

编辑文件组件本身仅包含一个模板，并且可以在我用vue cli创建的项目中使用。

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

Answer 1

在documentation中，您似乎缺少了Vue加载程序插件。

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    plugins: [
        new VueLoaderPlugin()
    ]
}

Answer 2

该项目是使用不同于我认为的模板创建的

我实际上使用了dotnet new vuejs

不是dotnet new vue。这样的事情发生在午夜左右。

在使用dotnet new vue创建的项目中使用单个文件组件

2 个答案: