Vue.js SSR Step by Step (1) - 实现简单的client-only vue-webpack 配置

最新推荐文章于 2024-05-17 20:02:00 发布

weixin_34249678

最新推荐文章于 2024-05-17 20:02:00 发布

阅读量2.3k

点赞数

文章标签： webpack javascript json ViewUI

原文链接：https://juejin.im/post/59f83b955188253d6816e36b

版权

一直都觉得SSR是一个挺麻烦的事情，牵扯的知识范围还挺大的，尤其是用vue-cli 工具，屏蔽了许多配置的细节。
但在使用SSR，不用Nuxt.js 的时候来做SSR，还是挺难上手的，索性好好捋一遍这方面的相关知识，总结成了一个系列的文章。作为 SSR 文档的一个补充，希望对大家有所帮助。

目标

这篇文章的主要目的解读一个简单的 vue-webpack 如何搭建和每一个插件的作用。完成一个 client-only的 vue-webpack 开发环境，具备以下的功能：

处理 vue 单文件组件
编译 ES6
编译 Less 或者 Sass
加载图片
开发服务器
热加载
定义环境变量
能区分生产环境进行压缩

对这相关配置已经非常了解了的同学可以直接关闭了。

添加基本功能

从这一节开始会贴出一步一步实现的代码，尽量还原整个配置的细节。

创建项目文件

$ mkdir simple-webpack && cd simple-webpack
$ npm init复制代码

然后按照下面的目录结构新建文件。

.
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── app.js
│   └── assets
└── webpack.config.js复制代码

安装对应依赖

需要安装 webpack 需要的依赖有：

webpack
vue-loader
babel-core
css-loader
babel-loader
file-loader
sass-loader
node-sass

依次安装时，把安装依赖保存到package.json，以便下次在不同的环境下使用时，能快速的安装依赖。

添加Vue代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>simple - webpack</title>
</head>
<body>
    <div id="app"></div>
  <script src="/dist/build.js"></script>
</body>
</html>复制代码

App.vue

<template>
  <div class="demo">
    <h1>Simple-webpack demo</h1>
    <p>这是一个简单的 Vue demo&l

最低0.47元/天解锁文章

weixin_34249678

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js SSR Step by Step (1) - 实现简单的client-only vue-webpack 配置

一直都觉得SSR是一个挺麻烦的事情，牵扯的知识范围还挺大的，尤其是用vue-cli 工具，屏蔽了许多配置的细节。但在使用SSR，不用Nuxt.js 的时候来做SSR，还是挺难上手的，索性好好捋一遍这方面的相关知识，总结成了一个系列的文章。作为 SSR 文档的一个补充，希望对大家有所帮助。目标这篇文章的主要目的解读一个简单的 vue-webpack 如何搭建和每一个插件的作用。完成一个 clie...
复制链接

扫一扫