Vueパッケージ後の空白ページの解決策

1. vue-cliがアイテムパッケージを作成した後、開いているページが空白になるという問題を解決します

1. コマンドライン入力：npm run build

パッケージ化後、プロジェクトに追加のフォルダーdistがあります。これは、パッケージ化した後のプロジェクトです。

2.パッケージ化が完了すると、構成によりvue.config.jsファイルが自動的に生成されます。このファイルは非常に重要であり、コレクションに値します

構成は次のとおりです。

const path = require("path");
const resolve = function(dir) {
    
    
  return path.join(__dirname, dir);
};
module.exports = {
    
    
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  outputDir: "dist",
  assetsDir: "static",
  lintOnSave: true, // 是否开启eslint保存检测
  productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
  chainWebpack: config => {
    
    
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@v", resolve("src/views"))
      .set("@c", resolve("src/components"))
      .set("@u", resolve("src/utils"))
      .set("@s", resolve("src/service")); /* 别名配置 */
    config.optimization.runtimeChunk("single");
  },
  devServer: {
    
    
    // host: "localhost",
    /* 本地ip地址 */
    //host: "192.168.1.107",
    host: "0.0.0.0", //局域网和本地访问
    port: "8080",
    hot: true,
    /* 自动打开浏览器 */
    open: false,
    overlay: {
    
    
      warning: false,
      error: true
    },
    /* 跨域代理 */
    proxy: {
    
    
      "/api": {
    
    
        /* 目标代理服务器地址 */
        target: "http://m260048y71.zicp.vip", //
        // target: "http://192.168.1.102:8888", //
        /* 允许跨域 */
        changeOrigin: true,
        ws: true,
        pathRewrite: {
    
    
          "^/api": ""
        }
      }
    }
  }
};

3番目の問題：router-viewのコンテンツが表示されません。ルーティング履歴モード

このピットは、ルーティングを使用した後にバックエンドの連携なしにルーティング履歴モードを開いた場合、パッケージ化されたファイルも空白になります。

解決策：コメントアウトモード：router.jsの履歴

非常に貴重なconfig.jsファイルはコレクションに値します

技術的なディスカッションのためにグループに参加することを歓迎します。グループ番号：954314851