nginx

項(xiàng)目使用vue-cli腳手架搭建，部署到nginx下
修改config.js下的index.js

...
  build: {
    // Template for index.html 配置入口文件-首頁(yè)
    index: path.resolve(__dirname, '../dist/index.html'),
  
    // Paths 配置項(xiàng)目build之后的打包路徑
    // 編譯輸出的靜態(tài)資源路徑
     assetsRoot: path.resolve(__dirname, '../dist'),
    // 配置資源文件路徑,即static文件夾路徑
    // 編譯輸出的assetsRoot下的二級(jí)目錄
    assetsSubDirectory: 'static',
    // 配置資源文件在項(xiàng)目中的引用【相對(duì)路徑】
    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項(xiàng)目nom run build 后產(chǎn)生的build文件夾

之后啟動(dòng)nginx訪問(wèn)即可。

image.png

Tomcat

修改配置文件，將build之后的文件路徑改為Tomcat的webapps下，這樣避免每次部署的復(fù)制dist文件夾下面的文件。
修改config.js下的index.js

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

    // Paths 配置項(xiàng)目build之后的打包路徑
    // 編譯輸出的靜態(tài)資源路徑
    assetsRoot: path.resolve(__dirname, 'D:/apache-tomcat-7.0.72-windows-x64/apache-tomcat-7.0.72/webapps/aigis'),
    // 配置資源文件路徑,即static文件夾路徑
    // 編譯輸出的assetsRoot下的二級(jí)目錄
    assetsSubDirectory: 'static',
    // 配置資源文件在項(xiàng)目中的引用【相對(duì)路徑】
    assetsPublicPath: './',
    productionSourceMap: true
...
}
...

PS: ../上級(jí)目錄 ./同級(jí)目錄 /根目錄

image.png

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

image.png

image.png

在Tomcat中部署要注意圖片路徑含中文的問(wèn)題，需要在Tomcat的server.xml文件中設(shè)置編碼,添加URIEncoding="UTF-8"配置

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

vue關(guān)閉sourceMap

cnpm run build 

運(yùn)行build命令之后，在項(xiàng)目目錄下自動(dòng)創(chuàng)建dist目錄，打包好的文件都在其中，這時(shí)候我們會(huì)在打包好的文件中發(fā)現(xiàn)一些.map的js、css文件，如下圖所示：

image.png

productionSourceMap: true

map文件的作用在于：項(xiàng)目打包后，代碼都是經(jīng)過(guò)壓縮加密的，如果運(yùn)行時(shí)報(bào)錯(cuò)，輸出的錯(cuò)誤信息無(wú)法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。
有了map就可以像未加密的代碼一樣，準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)。