Vue打包上线部署

时间:2022-05-24 06:15:07

一、路径问题

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

2、在打包前还要在config文件夹中的index.js中设置一个路径问题,不然也会报错,在js中找到build:{assetsPublicPath:'/'},默认路径是‘/’,需要加上'.',写成、'./’(一般正常编辑代码是只进行本步修改即可)。

二、favicon.ico问题

1、favicon图标也在index.html中引入了link的那句话,这个可以在build文件夹中的webpack.dev.conf.js

中的new HtmlWebpackPlugin({

favicon:'./logo.ico'

})加上这个路径,便可以找到这个图标了。

三、静态资源找不到问题

  

配置文件一:build>>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件(图片路径失效)的问题)

Vue打包上线部署

四、打包好后可以自己测试运行是否正常问题

1、这个时候需要用到node中的express,方法如下:

安装express:npm install -g express

最新版的express4.0版本中将命令工具分家出来,还需要安装一个命令工具:npm install -g express-generator

创建一个express工程:express helloworld

进入项目主目录:cd helloworld

安装必备包:npm install

启动express程序:npm start

最后把打包好的dist文件夹放在public文件夹里,访问http://localhost:3000/dist就能看的项目了,这样测试好后,就可以丢给后台了。