使用webpack打包后的vue项目如何正确运行(express)

2018-10-26 27 江峰★

我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢?

倘若直接打开html文件,会报如下错误:

使用webpack打包后的vue项目如何正确运行(express)

那么该如何运行呢?其实可以将生成的dist文件部署到express服务器上运行。

(1)、安装express-generator生成器。

npm install express-generator -g // 也可使用cnpm比较快 

(2)、创建一个express项目。

express expressName // expressName是项目名

(3)、进入项目目录,安装相关项目依赖。

 cd expressName

npm install // 或cnpm install

(4)、此时生成的项目目录应该是这样的:

使用webpack打包后的vue项目如何正确运行(express)

(5)、将dist文件夹下的所有文件复制到express项目的publick文件夹下面,然后运行npm start来启动express项目。

(6)、打开浏览器,输入localhost:3000就可以看到效果了。例如我的是这样的: 

使用webpack打包后的vue项目如何正确运行(express)

总结

以上所述是小编给大家介绍的使用webpack打包后的vue项目如何正确运行(express),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

展开阅读全文

更多Javascript文章

Firefox div高度自适应
Apr 28 27
javascript中的startWith和endWith的几种实现方法
May 07 29
JavaScript中number转换成string介绍
Dec 31 26
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 14
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 20
解决JS表单验证只有第一个IF起作用的问题
Dec 04 22
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 22
手机访问当前页面