npm运行生成后无法工作的日历

Question

我用vue2-datepicker作为日历。在开发过程中，当我单击表单中的输入框时，它与上面显示的日历非常好。但是，当我执行npm run build并加载结果页面时，当我执行相同的操作时，不会出现在上面的日历，更不会出现浏览器的developer控制台中的错误。

我尝试过在另一个浏览器中运行代码，但没有进行任何更改。我尝试了另一个日历，我得到了完全相同的行为，在开发，它的工作，但在构建之后，它没有。

这是我的package.json (编辑公司信息)

{
  "name": "[REDACTED]",
  "authors": [
    "[REDACTED]"
  ],
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "serve build -p 3080",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "test": "start-server-and-test start http-get://localhost:3080 cy:run",
    "styleguide": "vue-styleguidist server",
    "styleguide:build": "vue-styleguidist build"
  },
  "dependencies": {
    "@babel/runtime": "^7.16.7",
    "[REDACTED]": "[REDACTED]",
    "es6-promise": "^4.2.8",
    "serve": "^13.0.2",
    "vue": "^2.6.7",
    "vue-router": "^3.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.3.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.16.10",
    "@babel/preset-env": "^7.3.1",
    "@cypress/vue": "^2.2.3",
    "@cypress/webpack-dev-server": "^1.8.0",
    "@cypress/webpack-preprocessor": "^5.11.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@vue/cli-service": "^4.5.15",
    "babel-loader": "^8.0.5",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "cypress": "^9.4.1",
    "cypress-mochawesome-reporter": "^2.3.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^4.5.2",
    "prerender-spa-plugin": "^3.4.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "start-server-and-test": "^1.14.0",
    "vue-breakpoints": "^1.1.0",
    "vue-loader": "^15.9.8",
    "vue-styleguidist": "^4.44.2",
    "vue-template-compiler": "^2.6.14",
    "vue2-datepicker": "^3.10.4",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.0"
  }
}

还有我的webpack.config.js

var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const VueLoaderPlugin = require("vue-loader/lib/plugin");

const routes = [[REDACTED]];

module.exports = {
  mode: process.env.NODE_ENV,
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    publicPath: "/",
    filename: "build.js",
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]",
        },
      },
      {
        test: /\.css$/,
        use: ["vue-style-loader", "style-loader",
          {
            loader: "css-loader",
            options: {
              
            },
          },
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "fonts/",
            },
          },
        ],
      },
      // {
      //   test: /\.js$/,
      //   use: [
      //     {
      //       loader: "file-loader",
      //       options: {
      //         name: "[name].[ext]",
      //         outputPath: "js/",
      //       },
      //     },
      //   ],
      // },
    ],
  },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
  devServer: {
    historyApiFallback: true,
    noInfo: false,
    open: "chrome",
  },
  devtool: "#eval-source-map",
  plugins: [new VueLoaderPlugin()],
};
if (process.env.NODE_ENV === "production") {
  module.exports.devtool = "#source-map";
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: '"production"',
      },
    }),
    new HtmlWebpackPlugin({
      title: "PRODUCTION prerender-spa-plugin",
      template: path.join(__dirname, "public", "index.html"),
      filename: path.resolve(__dirname, "build/index.html"),
      favicon: path.join(__dirname, "public", "favicon.ico"),
    }),
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, "build"),
      routes: routes,
      renderer: new Renderer({
        headless: false,
        renderAfterDocumentEvent: "render-event",
      }),
    }),
  ]);
} else {
  // NODE_ENV === 'development'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new HtmlWebpackPlugin({
      title: "DEVELOPMENT prerender-spa-plugin",
      template: path.join(__dirname, "public", "index.html"),
      filename: path.join(__dirname, "build", "index.html"),
      favicon: path.join(__dirname, "public", "favicon.ico"),
    }),
  ]);
}

Answer 1

默认情况下，发球实用程序不配置为支持HTML5历史记录模式。这方面的解决方案是在单模式下运行serve以.

将所有未找到的请求重写到index.html

"scripts": {
  "start": "serve -s -p 3080 build"
}

另一种方法是打开默认页面(即http://localhost:3080/)并导航到您想去的地方。