webpack: 多页面+vue单页面 老项目jq升级

1 入手项目

进入一家老的公司,公司规模也不大,但是我们从git上下载后,我们猛然发现,这项目有一种心痛的感觉。

image.png
image.png

这都2020年了,居然还有人用这么古老的方案去进行一个项目。那么这时候,我们该怎么办,我们陷入了沉思,继续维护?还是准备跑路?忍住,我们先看看代码...

目录 一个公共的index代码....居然都没有抽离...如下代码大概有个1000多行....

blockquote,body,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,html,iframe,input,legend,li,ol,p,pre,td,textarea,th,ul{padding:0;margin:0}
html{-webkit-overflow-scrolling:touch;-webkit-text-size-adjust:100%;font-family:Arial, Helvetica, sans-serif;}
body{-webkit-overflow-scrolling:touch;-webkit-box-sizing:border-box;box-sizing:border-box}
a,body,select,select:focus,textarea,textarea:focus{-webkit-tap-highlight-color:transparent;outline:0;-webkit-appearance:none}
li{list-style-type:none}
table{border-collapse:collapse;border-spacing:0}
fieldset{border:none}
legend{display:none}
a:active,a:hover,button{outline:0}
input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}
b,em,i{font-style:normal;font-weight:400}
a{text-decoration:none;-webkit-tap-highlight-color:transparent}

@media screen and (min-width:1440px){html{font-size:200%}}
@media screen and (max-width:1440px){html{font-size:200%}}
@media screen and (max-width:1024px){html{font-size:150%}}
@media screen and (max-width:980px){html{font-size:150%}}
@media screen and (max-width:750px){html{font-size:150%}}
@media screen and (max-width:720px){html{font-size:150%}}
@media screen and (max-width:640px){html{font-size:150%}}
@media screen and (max-width:540px){html{font-size:150%}}
@media screen and (max-width:480px){html{font-size:125%}}
@media screen and (max-width:432px){html{font-size:120%}}
@media screen and (max-width:414px){html{font-size:115%}}
@media screen and (max-width:400px){html{font-size:112.5%}}
@media screen and (max-width:393px){html{font-size:104%}}
@media screen and (max-width:375px){html{font-size:104%}}
@media screen and (max-width:360px){html{font-size:100%}}
@media screen and (max-width:320px){html{font-size:87.5%}}
@media screen and (max-width:240px){html{font-size:75%}}

body{background-color: #f7f7f7;}
.popBox,.popBind,.popBind_text,.popBind_error{position: fixed;width:100%;height:100%;background:rgba(0,0,0,0.5);color:#999999;display: none;top:0px;z-index:10;}
.popBoxCont{width:18.1875rem;background-color: #fff;border-radius:0.3125rem;position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding-bottom:2.0313rem;}

.popBox_top{font-size:1rem;line-height:1.2rem;margin-top:2.75rem;margin-bottom:1.1875rem;}
.popBox_top i{font-size:1.3125rem;line-height:1.5rem;vertical-align:bottom;margin-left:0.4375rem;color:#5bba48;font-weight:bold;}
.popBoxDetail p{margin-left:2.375rem;margin-right:2.375rem;}

.popBoxDetail .popBox_counseName{font-size:1rem;line-height:1.3125rem;color:#5bbb47;background-color: #edfbea;margin-bottom:1.6563rem;position: relative;margin-left:1.9688rem;margin-right:1.9688rem;padding:0.2375rem 0.4688rem;}

2 项目分析

不能慌张,我们可是前端工程师...那么我们该怎么办呢?首先我们先分析一下我们可以怎么办,那么我们首先分析一下他使用的技术栈和运用场景。

2.1 运用场景

通过和项目组,产品的沟通。该项目,是运行在微信公众号上的的一个h5页面。那么能够给你的时间,差不多是一周时间,去熟悉了解,整个项目。

2.2 技术栈架构分析

1. js架构使用技术栈
  1.1 jquery
  1.2 jweixin
  1.3 swiper.min
2. css解决方案
   纯手写,手动rem
其实这时候,不难发现,就是累加的js,http未封装状态...
方法 方案 缺点
文件夹隔离 将老代码,丢到我看不到的地方,继续开发新项目。(看不到,那就当做没有问题) 在老项目的代码,硬伤还是硬伤,新代码的架构被迫跟随
微前端 做一个大规模容器,将新老项目做一个中间的桥接,让主架构负责项目的沟通,保证2个服务器正常运行 微前端的技术方案,大部分实例是作为后端管理系统中运行,在手机端中的适配能力未知。
webpack 多文件打包方案,让新老代码,在工具中兼容 人力改代码

3 webpack技术

webpack的优点不言而喻,如果不清楚的,可以去看webpack官网的介绍

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

4 目录结构

首先我们肯定是不会想去想改动,老项目代码,那毕竟是老项目...你去改动了...万一东西墙崩溃..最后的事故可不小。那么新页面呢..我们肯定是希望去使用单页面技术,毕竟加载和体验上,都有了毕竟好的体验。

先将原来的文件复制出一个来,我们也不希望在改动的过程中,破坏了代码原本的功能

mkdir jq-webpack
yarn add webpack@4.19.1 webpack-cli@2.1.4 -D
touch webpack.config.js

这时候,项目需要将 package.json 添加上指令

"build": "webpack --mode production --config=webpack.config.js",
"server": "webpack-dev-server --hot --config=webpack.config.js"

然后开始配置 webpack.config.js 原则上可以配置多种环境但是我们这边为了简单就配置一种

在项目结构不算过于复杂的情况下,其实我们还是可以理一下思路,就比如项目中,其实初始化css,js 都是可以抽离出来并且,可以形成一套完整的路由体系。那么就可以制作一个项目抽离的目录结构

- router
    - index.js  组合文件
  - resource.js 资源文件
  - router.js 路由文件
- src
    - common 公用的部分
    - css
    - js
    - images
  - pages 老项目的对应关系
    - index
        - index.html
        - index.js
        - index.css
    - activity
        - index.html
        - index.js
        - index.css
    - ....
  - utils 工具库
        index.js
  - public 难以做处理文件
    - images
    - lib
- package.json
- webpack.config.js

4.1 package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack  --mode production --config=webpack.config.js", // 打包指令
    "server": "webpack-dev-server --hot --config=webpack.config.js", // 启动指令
    "upload-test": "NODE_ENV=test node ./deploy", // 自动化上传-测试
    "upload-prod": "NODE_ENV=prod node ./deploy" // 自动化上传-正式
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.1.0",
    "babel-plugin-import": "^1.13.3",
    "chalk": "^4.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "compression-webpack-plugin": "^6.0.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^3.3.0",
    "cssnano": "^4.1.10",
    "expose-loader": "1.0.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "4.5.0",
    "html-withimg-loader": "^0.1.16",
    "less": "^3.13.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^1.3.2",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "ora": "^5.1.0",
    "post-loader": "^2.0.0",
    "postcss-loader": "^2.1.1",
    "postcss-pxtorem": "^5.0.0",
    "postcss-safe-parser": "^5.0.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "scp2": "^0.5.0",
    "style-loader": "^1.0.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.5",
    "vue-template-compiler": "^2.6.12",
    "webpack": "4.19.1",
    "webpack-cleanup-plugin": "0.5.1",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "3.11.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "lib-flexible": "^0.3.2",
    "vant": "^2.11.2"
  }
}

5 多页面配置

我们使用的技术,是比较普遍的webpack,多页面技术我们可以看到,每一个老项目的html 中,都会引入关于jq、自己的index.js、然后一股脑的images,又或许有些是放在自己的images里面...放在我们开始做一些隔离,分类组合,开始开多个文件夹,放入html、js、css。样式将会比较清楚,这时候开始做一些外部引入的操作。
首先我们配置一下router的文件,我这边做了一些拆分,当然你如果页面能模块化的,建议拆分的更细。

5.1 路由设置

resource.js 将文件路径中的设置放入资源管理库中

const entry = {
  // 首页
  "index-css": "./src/index/index.css",
  "index-js": "./src/index/index.js",
  
  // 活动页
  "activity-css": "./src/pages/activity/index.css",
  "activity-js": "./src/pages/activity/index.js",
}

module.exports = {
  entry
};

router.js 在路由页面中去组合

const router = [
  {
    name: "首页",
    filename: "index.html",
    chunks: ["index-css", "index-js"], // 如果多个可以引入多个
    template: "./src/pages/index/index.html",
  },
  {
    name: "活动",
    filename: "activity.html",
    chunks: ["activity-css", "activity-js"],
    template: "./src/pages/activity/index.html",
  },
];

module.exports = {
  router
};

index.js

const htmlPlugin = require("html-webpack-plugin");
const resource = require("./resource");
const routerObj = require("./router");

const htmlWebpackPlugins = [];
routerObj.router.forEach(item => {
  htmlWebpackPlugins.push(
    new htmlPlugin({
      filename: item.filename, //打包后的文件名
      minify: false,
      chunks: item.chunks, //每个html只引入对应的js和css
      inject: true,
      hash: true, //避免缓存js。
      template: item.template
    })
  );
});

module.exports = {
  htmlWebpackPlugins,
  entry: resource.entry
};

当然对于html也需要做一些处理处理,这里有两种方法

  • 直接使用cdn引入库、这里又分为免费库,和公司自己的库两种
  • 放入公共的public中,页面中引入
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动页面</title>
</head>
<body>
        
     <script src="./public/lib/jquery-1.8.0.min.js" charset="utf-8"></script>
</body>
</html>

这里是一段艰苦的历程.....

5.2 webpack.config.js 配置

const path = require("path");
const HtmlRouter = require("./router/index");
const CopyPlugin = require("copy-webpack-plugin");
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
const optimizeCss = require("optimize-css-assets-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 清除dist
const CompressionPlugin = require("compression-webpack-plugin");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");

module.exports = {
  devServer: {
    contentBase: path.resolve("dist"),
    host: "localhost", //服务器的IP地址,这里先使用loaclhost地址
    compress: true, //服务端压缩是否开启
    port: "8888", //配置服务端口号
    stats: "errors-only",
    historyApiFallback: true,
    overlay: true
  },
  entry: HtmlRouter.entry,
  output: {
    path: path.resolve("dist"),
    filename: "js/[name].[hash:8].js"
  },
  plugins: [
    new ProgressBarPlugin(),
    new CleanWebpackPlugin(),
    new optimizeCss({
      cssProcessor: require("cssnano"), //引入cssnano配置压缩选项
      cssProcessorOptions: {
        discardComments: { removeAll: true }
      },
      canPrint: true //是否将插件信息打印到控制台
    }),
    new ExtractTextWebpackPlugin({
      filename: "css/[name].[hash:8].css", // 配置提取出来的css名称
      allChunks: true
    }),
    new CopyPlugin(
      [
        {
          from: path.resolve(__dirname, "./src/public/lib"),
          to: path.resolve(__dirname, "./dist/public/lib")
        },
        {
          from: path.resolve(__dirname, "./src/public/images"),
          to: path.resolve(__dirname, "./dist/public/images")
        }
      ],
      { ignore: [], copyUnmodified: true }
    ),
    new CompressionPlugin()
  ].concat(HtmlRouter.htmlWebpackPlugins),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "~": path.resolve(__dirname, "src/pages/vue-template")
    }
  },
  module: {
    rules: [
      {
        test: /\.(htm|html)$/i,
        loader: "html-withimg-loader"
      },
      {
        test: /\.css$/,
        use: ExtractTextWebpackPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader"
            }
          ],
          publicPath: "../"
        })
      },
      {
        test: /\.(png|jpg|gif|jpeg|svg)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              //当加载的图片小于limit时,会将图片编译成base64字符串的形式,
              //当图片大于这个limit,会用file-loader进行加载
              limit: 10000,
              //在webpack4.x必须显式的指定fallback备用方法,这里指定为file-loader
              fallback: require.resolve("file-loader"),
              encoding: "base64",
              outputPath: "images/",
              publichPath: "images/",
              name: "[name].[hash:8].[ext]",
              esModule: false //解决方法
            }
          }
        ]
      }
    ]
  }
};

6 图片路径问题

在处理这一段代码的时候,最令人无奈的就是关于,jq中插入过html,你所有的语法是$('.xx').html(xx),在这个阶段,你很容易会遇到一个巨大的坑..就是图片无法被webpack去解析,这样打包出来的图片。

有三种解决方案的思路

  • 直接以cdn的形式引入,一个http图片,不存在这个问题
  • 把页面放入到我们已经准备好的public目录下,使用绝对路径去解决
  • 在代码中使用require方法去引入一些图片,然后作为代码的解析

7 单页面配置-Vue

前面做了那么多业务,目的就是从业务上可以往vue页面靠齐...那么肯定不会是以vue-cil 这样方式出现,那么我就要研究一下vue-cil的本质,其实还是一个webpack,那么为什么可以解析vue,less。既然是多页面了,又怎么兼容?

7.1 vue项目建立

熟悉的项目格式又回来了,这里就不多做介绍了

- src
    - pages
  - vue-template
    - index.html
    - pages
        - 404.vue
      - home.vue
    - routers
        - index.js
    - App.vue

7.2 配置单页面

在我们刚刚的路由中,我们设置一下

resource.js 资源文件中增加

"vue-template-js": "./src/pages/vue-template/main.js"

router.js 路由文件中增加

{
  name: "vue-template",
  filename: "template.html",
  chunks: ["babel-polyfill", "vue-template-js"],
  template: "./src/pages/vue-template/index.html",
}

7.3 webpack配置

首先我们需要加载less,然后将我们熟悉的px,自动转rem、自动加上兼容前缀

const VueLoaderPlugin = require("vue-loader/lib/plugin");

plugins: [
  ...
    new VueLoaderPlugin()
]
resolve: {
    alias: {
       "@": path.resolve(__dirname, "src"),
        "~": path.resolve(__dirname, "src/pages/vue-template"),
        vue$: "vue/dist/vue.esm.js"
    }
},
module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextWebpackPlugin.extract({
        fallback: "style-loader",
        use: [
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader",
          },
        ],
        publicPath: "../",
      }),
    },
    {
      test: /\.less$/,
      use: ExtractTextWebpackPlugin.extract({
        use: [
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader",
          },
          {
            loader: "less-loader",
          },
        ],
        fallback: "style-loader",
      }),
    },
    {
      test: /\.vue$/,
      loader: "vue-loader",
    },
  ],
},
externals: {
  vue: "Vue",
  "vue-router": "VueRouter"
}

7.4 配置rem自动化

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ["Android >= 4.0", "iOS >= 7"]
    },
    "postcss-pxtorem": {
      rootValue: 37.5,
      propList: ["*"]
    }
  }
};

7.5 编写vue-template/html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
    />
    <title>vue模板</title>
  </head>

  <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .webpack-home {
      background-color: #303133;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .webpack-home__main {
      user-select: none;
      width: 100%;
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .webpack-home__footer {
      width: 100%;
      flex-grow: 0;
      text-align: center;
      padding: 1em 0;
    }

    .webpack-home__footer > a {
      font-size: 12px;
      color: #ababab;
      text-decoration: none;
    }

    .webpack-home__loading {
      height: 32px;
      width: 32px;
      margin-bottom: 20px;
    }

    .webpack-home__title {
      color: #fff;
      font-size: 14px;
      margin-bottom: 10px;
    }

    .webpack-home__sub-title {
      color: #ababab;
      font-size: 12px;
    }

    .ql-editor {
      min-height: 150px;
    }

    .ql-snow .ql-picker {
      height: 36px !important;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 3),
      only screen and (min--moz-device-pixel-ratio: 3),
      only screen and (-o-min-device-pixel-ratio: 3/1),
      only screen and (min-device-pixel-ratio: 3),
      only screen and (min-resolution: 458dpi),
      only screen and (min-resolution: 3dppx) {
      .van-tabbar--fixed {
        padding-bottom: 15px !important;
      }
    }
  </style>

  <body>
    <div id="app">
      <div class="webpack-home">
        <div class="webpack-home__main">
          <img
            class="webpack-home__loading"
            src="./svg/loading-spin.svg"
            alt="loading"
          />
          <div class="webpack-home__title">
            正在加载资源
          </div>
          <div class="webpack-home__sub-title">
            初次加载资源可能需要较多时间 请耐心等待
          </div>
        </div>
        <div class="webpack-home__footer"></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </body>
</html>

7.6 编写vue-template/main.js

实例化一个vue项目,这里只做一个简单的实例化配置,并添加路由

更多可以根据业务情况来配置,比如按需加载什么的,这里只是一个简单的阐述结构

import routers from "./routers/index";
import App from "~/App.vue";
import Vant from "vant";
import "vant/lib/index.css";
import "lib-flexible";

Vue.use(VueRouter);
Vue.use(Vant);

const router = new VueRouter({
  routes: routers
});

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

8 自动化发布

在deploy目录下,设置

products.js 服务器配置

/*
 *定义多个服务器账号 及 根据 SERVER_ID 导出当前环境服务器账号
 */
const SERVER_LIST = [
  {
    id: 0,
    name: "A-测试环境",
    host: "127.0.0.1", // ip
    url: "http://www.baidu.com",
    port: 22, // 端口
    username: "root", // 登录服务器的账号
    password: "", // 登录服务器的账号
    path: "" // 发布至静态服务器的项目路径
  }
];

module.exports = SERVER_LIST;

index.js 执行函数

const scpClient = require("scp2");
const ora = require("ora");
const chalk = require("chalk");
const servers = require("./products");
let server = servers[process.env.NODE_ENV === "prod" ? 1 : 0];
const spinner = ora(
  "正在发布到" +
    (process.env.NODE_ENV === "prod" ? "生产" : "测试") +
    "服务器..."
);

var Client = require("ssh2").Client;

var conn = new Client();
conn
  .on("ready", function() {
    // rm 删除dist文件,\n 是换行 换行执行 重启nginx命令 我这里是用docker重启nginx
    let dels = `rm -rf ${server.path}\n mkdir ${server.path}`;
    conn.exec(dels, function(err, stream) {
      if (err) throw err;
      stream
        .on("close", function(code, signal) {
          // 在执行shell命令后,把开始上传部署项目代码放到这里面
          spinner.start();
          scpClient.scp(
            "dist/",
            {
              host: server.host,
              port: server.port,
              username: server.username,
              password: server.password,
              path: server.path,
            },
            function(err) {
              spinner.stop();
              if (err) {
                console.log(chalk.red("发布失败.\n"));
                throw err;
              } else {
                console.log(
                  chalk.green(
                    "Success! 成功发布到" +
                      (process.env.NODE_ENV === "prod" ? "生产" : "测试") +
                      "服务器! \n"
                  )
                );
                console.log(server.url);
              }
            }
          );
          conn.end();
        })
        .on("data", function(data) {
          console.log("STDOUT: " + data);
        })
        .stderr.on("data", function(data) {
          console.log("STDERR: " + data);
        });
    });
  })
  .connect({
    host: server.host,
    port: server.port,
    username: server.username,
    password: server.password,
  });

9 git地址

https://github.com/MYQ1996/jq-webpack.git

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容