创建基于webpack打包的Vue项目

最新推荐文章于 2025-06-08 14:31:28 发布

原创最新推荐文章于 2025-06-08 14:31:28 发布 · 462 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #初始化

Vue 专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍如何在VSCode中从零开始搭建一个Vue项目，包括指定工作空间、全局安装Vue、创建基于webpack的项目、安装依赖、运行及编译打包项目，并将dist文件夹内容部署到Nginx服务器上。

1.指定WorkSpace,或者说工程路径，VSCode编辑器只能打开一个工程文件，

//比如工程放在桌面的某一个文件夹下
cd /Users/xiaofeiniao/Desktop/

//在桌面上创建一个文件夹
mkdir testVue

如果想用VSCode同时打开多个工程文件，

解决方案：1.两个工程文件放置在同一个文件夹下

2.放在同一个workspace下：

2.全局安装Vue，通常都是通过安装Vue的脚手架cli

npm install -g vue-cli

3.创建一个基于webpack的Vue项目

//终端命令 进入文件夹
cd testVue

projectName //项目名字 不能大写
project description //项目描述 
author //作者
install vue-router //是否安装vue-router路由
use ES-Lint to lint your code //是否使用ES-Lint 校验你的代码语法  建议关闭
set up unit test //是否设置单元测试 暂时还没用到

4.安装项目依赖

//使用 cd 命令 进入项目目录
cd Hello
//安装依赖
npm install

5.运行项目

npm run dev

如果是在VSCode终端运行成功，会有如下提示

6.浏览器终端输入

http://localhost:8082

7.编译打包:

//编译打包
npm run build

同时工程文件夹下也会打包出现一个dist文件夹

编译打包完毕之后，dist文件夹下的内容就是放在服务器上的内容，此时，你双击dist文件夹下的index.html ，在浏览器是能打开，如果打开之后是空白页，解决方案参照链接：https://blog.youkuaiyun.com/ioszhanghui/article/details/94415728

8.服务器配置和部署,目前使用的测试服务器是Nginx服务器,把dist文件夹的内容上传的服务器的解析路径

//scp -r 文件夹上传
scp -r ./ root@39.97.231.231:/usr/local/nginx/html

学习博客：https://blog.youkuaiyun.com/qq_35393869/article/details/83090578