创建基于webpack打包的vue项目

结合win7、element-ui、vue（vue-router、vue-cli）、webpack等技术，完成了项目的基础工作。难则不会，会则不难；贵在经验总结，后期可参。

---

项目截图预览：

---

花絮 · 先预览 - 项目目录结构图

---

特别注意 · 比如：

• 我想创建一个项目，项目文件夹名称为：mywebpack；
• • 并且想把项目文件夹的路径设定在 C：/user/mywebpack；

---

• 全程使用cmd命令创建vue项目，它会从无开始创建。
• • 那么，此时你的C：/user/路径下，就不应该存在文件夹/mywebpack。
• （下面我们开始创建一个项目，步骤如下：）

一、 项目初建、编译打包、服务器配置 大致分析：【以上图为例】

1. 指定workplace，开始初建项目：
   cd 目标位置路径(如：C:\Users)

• 或者：你直接在目标地点Shift + 右键，运行 “在此处打开命令窗口”；

2. 安装vue：
   cnpm install -g vue-cli

3. 创建一个基于 “webpack” 模板的新项目：
   vue init webpack mywebpack 【mywebpack：项目文件夹名称】

4. 安装依赖，以及其他脚手架element-ui：
   cd my-first-project
npm i element-ui -S
npm install

5. 运行项目：
   npm run dev

6. vue开发环境搭建完毕，监听8080端口，浏览器查看：
   localhost:8080

7. 编译打包：
   cd 项目文件物理路径，如：cd C:\Users\mywebpack
npm run build

8. 编译打包完成之后，进行简单文件url或src路径调整；
   如下文【二、】注意(3) 中，所提示

9. 服务器配置 / 部署
   如下文【五、】参看文章(2) 中，所提示

---

二、 cmd 命令 ：webpack编译打包

npm run build 仔细拼写错误！

【打包编译】完成之后，生成dist文件，【截图如下】

注意：

• (1) npm run build是项目打包命令，运行这个命令后会生成可以进行上线的打包文件；
• (2) 这时候打开根目录下的index.html就可以直接看到你的项目效果了
• (3) 测试过程中，双击index.html页面出现空白、图片不显示等现象，仔细更改一下src引入路径即可。

---

留意：

• webpack 编译图片是有规则的，你可以自己配置小于多少M的图片进行编译，目前我的情况是只将一些小的图片编译了，vue也是从页面优化的角度出发，大图片编译成 base64 的话，得不偿失，会造成加载页面文件太大，小的图片编译是为了减少 http 请求，从而提升加载效率。
• 当然图片较大，编码会消耗性能。因此url-loader 提供了一个limit 参数，小于limit字节的文件会被转为dataUrl，大于limit的会使用file-loader进行Corp。

三、 相关截图，如下：

---

四、 vue里 npm run build之后，应该怎么运行

项目开发完成之后，可以使用npm run build进行打包工作。打包完成之后，会生成dist文件夹，项目上线时候，只需要将dist文件夹放到服务器就行了。
[可参考链接：*附3]

---

五、 附 · 参考文章：

• 1.Vuejs在Win7下的环境搭建【推荐翻阅】
• 2.vue里 npm run build后应该怎么运行【推荐翻阅】
• 3.centos - 服务器的部署
• 4.wamp - vue项目如何在wamp上跑起来
• 5.Tomcat - Vue项目webpack打包部署到服务器的实例详解
• 6.Vue 项目部署到服务器的问题解决方法 [前、后端沟通后分步配置]

---

以上就是关于“ 创建基于webpack打包的vue项目 ” 的全部内容。