打包vue项目,并利用webpack运行在本地

打包后的项目生成的dist文件能够部署到 express 服务器上运行html

1. 打包vue项目

(1)cd vue项目vue

(2)npm run bulidwebpack

(3)打包完会生成dist文件夹。如图:web

(4)注意:若是此时打开dist下的index.htmlexpress

页面将一片空白,而且报错npm

vue打包的项目不能直接打开,由于直接打开的的协议是file,vue项目必须放在服务器上才能打开浏览器

2. 利用webpack运行vue项目

(1) cd 到新目录服务器

(2)安装express-generator生成器htm

npm install express-generator -gblog

(3) 建立一个express项目

express test (test是项目名)

(4)cd test

(5) npm install

(6)把vue项目dist下的全部文件拷贝到webpack项目(test)的public目录下

(5)npm start

启动express项目

打开浏览器,输入 http://localhost:3000 便可

相关文章
相关标签/搜索