vue-cli脚手架创建vue项目并打包运行_脚手架打包运行-优快云博客

本文详细介绍使用Vue CLI创建项目，配置Webpack，解决常见错误，以及如何打包上线的全过程。从环境搭建到本地运行，再到最终部署，提供了一套完整的Vue项目开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 安装 NPM，安装nodejs自带NPM，这个不是重点不详细说。
2 安装 webpack，npm install webpack -g 执行全局安装，这个不是重点不详细说。
3 安装 vue-cli 执行命令：npm install -g vue-cli
4 查询vue版本执行命令：vue -V
5 创建项目目录G:\net\web\vue-cli-demo，进入项目目录执行命令： vue init webpack
在这里插入图片描述
6.执行命令：npm install，安装依赖看到以下项目结构，头大啊，看不懂目录结构的自学下 webpack

7 运行项目执行命令：Npm run dev
8 如果出现错误8080端口错误，修改config/index.js文件内容，修改端口号

9.再次运行项目执行命令：Npm run dev
10 本地运行成功，这里算完成80%。
11 打包上线，执行命令npm run build
12 打包完成后，会生成 dist 文件夹，项目上线时，只需要将 dist 文件夹放到服务器就行了。
在这里插入图片描述
13.点击index.html，通过浏览器运行，出现以下报错，如图：

那么应该如何修改呢？
具体步骤如下：
1、查看package.js文件的scripts命令
2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件
3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘./’,即“/”前加点。
4、终端运行 npm run build 即可。