使用vue-template-compiler渲染页面失败及npm run dev报错问题

Let's tackle your two main problems step by step:

1. Fixing the "missing script: dev" Error #

The error pops up because your package.json doesn't have a dev script defined in the scripts section. Looking at your provided config:

{"name": "vue-sunrise", "version": "0.1.0", "private": true, "scripts": {"serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint"}, ...}

You have two straightforward fixes:

• Option 1: Use the existing valid script
  Instead of npm run dev, use the pre-configured serve command:

  npm run serve
  

• Option 2: Add a dev alias
  Modify your package.json to add a dev script that points to the serve command (so you can keep using npm run dev):

  "scripts": {
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
  

2. Fixing the Blank Page & Missing Console Output #

Your Express server isn't sending any valid content to the browser, which is why the page hangs and you see no console output. Let's break down the issues in your code and fix them:

Problems in Your Current Code #

• vue-template-compiler.compile() expects a raw template string, not a file path. Passing 'src/views/index.vue' won't load or compile your actual component file.
• You call compiler.compile() but never send any response back to the client with res.send() or similar methods. The browser waits forever for a server response, leading to a blank page.

Corrected Code Example #

Here's a basic working version that loads, compiles, and serves your Vue component (note: for production, consider using Vue's official server-side rendering tools or sticking with vue-cli's dev server):

const express = require('express'),
      app = express(),
      fs = require('fs'),
      path = require('path'),
      compiler = require('vue-template-compiler');

const serverPort = process.env.PORT || 3000;

app.get('/', (req, res, next) => {
  // Get the absolute path to your Vue component file
  const vueFile = path.resolve(__dirname, 'src/views/index.vue');
  
  // Read the content of the Vue file
  fs.readFile(vueFile, 'utf8', (err, fileContent) => {
    if (err) {
      console.error('Failed to load Vue component:', err);
      return res.status(500).send('Error loading page');
    }

    // Compile the Vue single-file component template
    const compiledResult = compiler.compile(fileContent);

    // Send a basic HTML page that renders the compiled template with Vue
    res.send(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>Vue App</title>
          <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
        </head>
        <body>
          <div id="app"></div>
          <script>
            new Vue({
              el: '#app',
              // Use the compiled render function
              render: ${compiledResult.render}
            });
          </script>
        </body>
      </html>
    `);
  });
});

app.listen(serverPort, () => {
  console.log("Веб сервер запустился успешно");
});

Key Notes #

• Vue Single-File Components: vue-template-compiler only handles the template part of .vue files. To process <script> and <style> sections fully, you'd need tools like vue-loader (which is already configured if you used vue-cli to create the project).
• Simpler Workflow: If this project was initialized with vue-cli, using npm run serve will start a fully configured dev server that automatically handles Vue components—you don't need to write your own Express server for development.

内容的提问来源于stack exchange，提问作者sha512boo