Vue新手教程(2)－将vue项目发布到生产环境

上一篇文章讲到vue项目在搭建好后可以通过npm run dev命令可以启动并在浏览器中访问，但这种方式只是启动开发环境，那么怎么将项目发布到生产环境呢？需要以下三个步骤：

1.编译vue项目

操作命令：npm run build

编译成功后会自动生成dist目录 (包括了static子目录以及index.html文件)

2.安装web服务器tomcat

3.将编译后的文件放到tomcat服务器

将整个dist目录下拷贝到tomcat安装目录下的webapps下

部署完成,启动 tomcat，浏览器中输入http://localhost:8080/dist

 

访问时遇到的问题：

若浏览器出现空白，可能是静态资源路径问题，通过以下方式可以解决：

打开vue项目的config/index.js文件，找到build节点下面的assetsPublicPath参数

将绝对路径 '/' 改为相对路径 './'(斜杠前面加个点)，重新使用npm run build命令进行编译并复制到tomcat目录下替换旧文件