vue打包为“.war”发布到Tomcat服务器

idea中打包vue项目

1、首先使用idea打开vue工程，并在vue工程中找到其根目录的文件：package.json

2、右击package.json文件，选择右击菜单下的open in terminal选项

3、这是打开terminal控制台，会根据选择的package文件路径自动切换到此文件所在路径上

4、在控制台输入npm run build，准备开始进行打包

5、提示building for production…，说明打包工作已经开始

6、等最后提示build complete时，打包完成。已经打完的包可在同级目录下dist文件夹下边找到

7、打开cmd控制台，进入要打包的文件夹，使用命令：jar -cvf 文件名.war *（“*”与war有空格），生成的war包就在文件夹下

Tomcat中文乱码

记事本打开conf-logging.properties，将51行代码用“#”注释掉或删掉“java.util.logging.ConsoleHandler.encoding = UTF-8”

在Tomcat启动窗口中最好不要用鼠标扩选文本（可能会导致进程卡顿？），如果扩选了按“Esc”。

index.html可以正常打开也没有错误提示，如果vue-router跳转路由页面无法显示，解决方法：

打开index.js看路由配置，mode:'hash'改这个配置即可。

npm run build不可以正常打开，浏览器开发者有错误提示

是由于index.html中文件路径错误，在vue项目根目录（与package.json同级）下创建vue.config.js文件并粘贴：

module.exports = {

    publicPath: './',

    outputDir: 'dist',

    assetsDir: 'static'

}

即可。

vue项目根目录中的package.json文件指的是vue中src/views/*.vue中与src同级的那个package.json，而不是其他的同名文件，vue.config.js也与src同级，打包后的dist也与之同级，生成的war文件在dist目录下。

Tomcat发布程序

1）在Webapps目录下建立一个子目录，名称不能为中文。

2）在子目录中放置自己开发的程序。

3）tomcat的bin目录下双击startup.bat是开启tomcat（不要关闭窗口），双击shutdown.bat是关闭tomcat（此时可以关闭开启tomcat的那个窗口，因为它不会自己关），每更新一次webapps最好都要重启一次tomcat。

动态项目（有java等语言）的目录结构

--项目根目录

        --静态资源目录（图片、资源、视频…）

        --html静态页面

        --jsp动态页面

        --WEB-INF存放当前项目动态代码和配置信息

                --lib存放Java程序中使用的第三方包

                --classes存放Java程序编译之后的class文件

                --web.xml当前项目的描述配置文件

这篇好文章是转载于：学新通技术网