关于vue-cli + webpack打包给后台,部署上线

最新推荐文章于 2024-08-18 15:17:16 发布

转载最新推荐文章于 2024-08-18 15:17:16 发布 · 571 阅读

前端知识专栏收录该内容

110 篇文章

订阅专栏

本文详细解析了前端项目在使用脚手架+webpack打包后遇到的路径问题，包括如何正确配置相对路径避免资源加载错误，调整config/index.js中的assetsPublicPath属性，以及在webpack配置中指定favicon.ico路径。此外，还介绍了如何通过express搭建本地服务器进行项目测试。

1.路径问题
(1).脚手架 + webpack打包必然是npm run build,但是后台用tomcat部署上线的时候,可能会衍生出一点问题,比如,路径问题(这里的路径问题,是因为在项目中,我们使用了绝对路径,这里必须要用相对路径,但是打包后,还是会报错,说是找不到assets文件夹下的各种资源,包括images,css,js,是因为,当初在全局引用的时候,写在了index.html中,安全起见,可以写入app.vue中);

(2).在打包前还要在config文件夹中的index.js中设置一个路径问题,不然也会报错,在js中找到build:{assetsPublicPath: './'},默认路径是'/',需要加上'.'

2.favicon.ico
(1).favicon图标也在index.html中引入了link的那句话,这个可以在webpack.dev.conf.js中的
new HtmlWebpackPlugin({
favicon: './favicon.ico'
})加上这个路径,便可以找到这个图标;

3.打包好后可以自己测试运行是否正常
(1).这个时候需要利用node中的express,方法如下:
安装express: npm install -g express;
最新express4.0版本中将命令工具分家出来了,还需要安装一个命令工具: npm install -g express-generator;
创建一个express工程: express helloworld;
进入项目主目录: cd helloworld;
安装必备包: npm install;
启动程序: npm start;
把打包后的dist文件夹放在public文件夹里,访问http://localhost:3000/dist就能看到项目了,这样测试好了后,就可以丢后台了
---------------------
作者：GossipHHH
来源：优快云
原文：https://blog.youkuaiyun.com/GossipHHH/article/details/78749308
版权声明：本文为博主原创文章，转载请附上博文链接！