vue项目nginx和Tomcat下的部署

nginx

项目使用vue-cli脚手架搭建，部署到nginx下
修改config.js下的index.js

...
  build: {
    // Template for index.html 配置入口文件-首页
    index: path.resolve(__dirname, '../dist/index.html'),
  
    // Paths 配置项目build之后的打包路径
    // 编译输出的静态资源路径
     assetsRoot: path.resolve(__dirname, '../dist'),
    // 配置资源文件路径,即static文件夹路径
    // 编译输出的assetsRoot下的二级目录
    assetsSubDirectory: 'static',
    // 配置资源文件在项目中的引用【相对路径】
    assetsPublicPath: './',
    productionSourceMap: true
...
}
...

修改nginx的配置文件nginx.conf

 location / {
            root   E:\vue\01_AIGIS\vue-cliDemo\demo\dist;
            index  index.html index.htm;
            add_header  Access-Control-Allow-Origin '*' ; 
        }

root指向vue项目nom run build 后产生的build文件夹

之后启动nginx访问即可。

image.png

Tomcat

修改配置文件，将build之后的文件路径改为Tomcat的webapps下，这样避免每次部署的复制dist文件夹下面的文件。
修改config.js下的index.js

...
  build: {
    // Template for index.html 配置入口文件-首页
    index: path.resolve(__dirname, 'D:/apache-tomcat-7.0.72-windows-x64/apache-tomcat-7.0.72/webapps/aigis/index.html'),

    // Paths 配置项目build之后的打包路径
    // 编译输出的静态资源路径
    assetsRoot: path.resolve(__dirname, 'D:/apache-tomcat-7.0.72-windows-x64/apache-tomcat-7.0.72/webapps/aigis'),
    // 配置资源文件路径,即static文件夹路径
    // 编译输出的assetsRoot下的二级目录
    assetsSubDirectory: 'static',
    // 配置资源文件在项目中的引用【相对路径】
    assetsPublicPath: './',
    productionSourceMap: true
...
}
...

PS: ../上级目录 ./同级目录 /根目录

image.png

utils.js中添加publicPath: '../../'

image.png
webpack.prod.conf.js中添加publicPath: './'
image.png

在Tomcat中部署要注意图片路径含中文的问题，需要在Tomcat的server.xml文件中设置编码,添加URIEncoding="UTF-8"配置

<Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000" URIEncoding="UTF-8"
               redirectPort="8443" />

vue关闭sourceMap

cnpm run build 

运行build命令之后，在项目目录下自动创建dist目录，打包好的文件都在其中，这时候我们会在打包好的文件中发现一些.map的js、css文件，如下图所示：

image.png
怎么去掉这些文件呢？
解决办法：去src/config/index.js中改修改productionSourceMap参数为false。

productionSourceMap: true

map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。