在 Heroku 上部署 Vue 应用程序构建时出现意外的语法错误

如何解决在 Heroku 上部署 Vue 应用程序构建时出现意外的语法错误

在本地运行我的 Vue 应用程序工作正常，运行 npm 命令“npm run build”似乎工作正常并将我的应用程序构建到我的公共目录中的指定文件中，在服务器目录中。然而，当我在 Heroku 推送主分支和 heroku 构建之后查看我的应用程序时...

我收到 - Uncaught SyntaxError: Unexpected token '

https://i.stack.imgur.com/DpUE9.png

// vue.config.js

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname,"../server/public"),publicPath: "",devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:5000",},css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/assets/scss/main.scss";',pwa: {
    manifestOptions: {
      name: "bloom",short_name: "bloom",start_url: "./",theme_color: "#fef1c5",msTileColor: "#ffffff",appleMobileWebAppCapable: "yes",appleMobileWebAppStatusBarStyle: "black",icons: [
        {
          src: "./img/icons/favicon-32x32.png",sizes: "32x32",type: "image/png",{
          src: "./img/icons/favicon-16x16.png",sizes: "16x16",{
          src: "./img/icons/android-chrome-512x512.png",sizes: "512x512",{
          src: "./img/icons/android-chrome-192x192.png",sizes: "192x192",],// configure the workBox plugin
      workBoxPluginMode: "InjectManifest",workBoxOptions: {
        // swSrc is required in InjectManifest mode.
        swSrc: "./registerServiceWorker.js",// ...other WorkBox options...
      },};

// server.js

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path');
const dbConnection = require('./app/config/db.connection.js');
const router = require('./app/routes/router.js');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http,{
  cors: {
    origin: 'http://localhost:8080',});

const eventHandler = require('./app/controllers/socketEvents.js');

io.on('connection',(socket) => {
  eventHandler.ioEvents(socket,io);
});

app.use(cors());

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(router);

app.use(express.static(__dirname + '/public/'));

// Handle SPA
app.get(/.*/,(req,res) =>
  res.sendFile(path.resolve(__dirname,'public/index.html'))
);

// set port,listen for requests
const PORT = process.env.PORT || 5000;
http.listen(PORT,() => {
  console.log(`Server is running on port ${PORT}.`);
});

内置 HTML：

<!DOCTYPE html>
<html lang="">

<head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <base href="">
    <Meta name="theme-color" content="#fee89e">
    <title>bloom</title>
    <link href="css/app.93c75862.css" rel="preload" as="style">
    <link href="js/app.a42fdcc7.js" rel="preload" as="script">
    <link href="js/chunk-vendors.b94d5c90.js" rel="preload" as="script">
    <link href="css/app.93c75862.css" rel="stylesheet">
    <link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png">
    <link rel="manifest" href="manifest.json">
    <Meta name="theme-color" content="#4DBA87">
    <Meta name="apple-mobile-web-app-capable" content="no">
    <Meta name="apple-mobile-web-app-status-bar-style" content="default">
    <Meta name="apple-mobile-web-app-title" content="bloom">
    <link rel="apple-touch-icon" href="img/icons/apple-touch-icon-152x152.png">
    <link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#4DBA87">
    <Meta name="msapplication-TileImage" content="img/icons/msapplication-icon-144x144.png">
    <Meta name="msapplication-TileColor" content="#000000">
</head>

<body><noscript><strong>We're sorry but bloom doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    <div id="app"></div>
    <script src="js/chunk-vendors.b94d5c90.js"></script>
    <script src="js/app.a42fdcc7.js"></script>
</body>

</html>

在 Heroku 上部署 Vue 应用程序构建时出现意外的语法错误

如何解决在 Heroku 上部署 Vue 应用程序构建时出现意外的语法错误

相关推荐