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



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

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



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

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

npm install express-generator -g // 也可使用cnpm比较快
(2)、创建一个express项目。

express expressName // expressName是项目名

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

cd expressName
npm install // 或cnpm install
(4)、此时生成的项目目录应该是这样的:



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

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



总结

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





  • vscode缂栧啓vue椤圭洰鎻愮ず浠ヤ笅鎶ラ敊,楹荤儲澶т浆瑙e喅涓?
    绛旓細vue-style-loader鍜宑ss-loader渚濊禆娌″畨瑁呭懡浠よ鎵ц浠ヤ笅npm install vue-style-loader css-loader -D
  • 楂樹腑鑻辫鍗曡瘝
    绛旓細Module 1 academic [,?k?'demik] adj. 瀛︽湳鐨 province ['pr?vins] n. 鐪 enthusiastic [in,胃ju:zi'?stik] adj.鐑績鐨,amazing [?'meizi?] adj.浠や汉鍚冩儕鐨勶紱浠や汉鎯婅鐨 information [,inf?'mei??n] n. 娑堟伅 website [ web鈥檚ait] n.缃戠珯锛涚綉鍧 brilliant ['brilj?nt] adj.(鍙h...
  • VHDL缂栬瘧閿欒
    绛旓細鎴戝湪QuartusII 閲岀紪璇戜簡浣犵殑绋嬪簭锛屾姤閿欙細Error (10500): VHDL syntax error at p2r_CordicPipe.vhd.vhd(58) near text "compatibility"; expecting "begin", or a declaration statement 鈥渃ompatibility with Xilinx WebPack 鈥濊繖涓琛岋紝浣鐢鐨刋ilinx鍣ㄤ欢锛屾槸涓嶆槸搴旇鐢 ModleSim 锛堝弬鑰僪ttp://www...
  • 扩展阅读:webpack打包传统网站 ... typescript ... webpack打包流程 面试 ... webpack打包vue项目 ... webpack打包命令及步骤 ... webpack打包指定文件夹 ... vue webpack打包优化 ... webpack打包jquery项目 ... webpack打包项目怎么使用 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网