vue-cli webpack 项目打包后如何运行

vue-cli webpack 创建的项目打包后生成的项目如何运行

1.项目打包
运行 npm run build 项目打包 会形成一个dist文件加,里面是打包之后的东西
在这里进行一下描述
dist 整个文件夹下的东西就是要运行在服务器端的所有东西,之外的任何东西都是本地测试的,不需要部署服务器上
2.如何运行打包后的项目
以express服务器为例
安装express
创建一个文件夹,在文件夹下运行命令行工具,先生成package.json。
npm init
创建完毕后,安装express。
npm install express --save
安装完,再找个脚手架自动生成一个简单的服务器吧。
安装Express 应用生成器
npm install express-generator -g
然后创建一个应用,并安装依赖。
express myapp
cd myapp
npm install
启动express服务器
npm start
打开localhost:3000查看效果
在这里插入图片描述
3.运行项目
找到打包后的dist文件夹
将dist文件夹里面的所有内容都copy走,
找到上面创建的express服务所在文件地址
在这里插入图片描述
找到public目录,直接将dist文件夹里面的所有东西全部copy过来,放入public里面即可
再次访问 http:localhost:3000 你就会发现,展示的页面是你写好的vue项目页面,而且打包之后的项目真的超级轻量级

猜你喜欢

转载自blog.csdn.net/qq_38652871/article/details/84430680