關于vue部署
1.nginx轉發(fā)
一般項目前后端分離得話，都會用nginx作為反向代理轉發(fā)的。
因為項目要兼容ie9,使用axios發(fā)ajax請求的時候,不能通過CORS解決跨域的問題,所以嘗試部署nginx作反向代理.
參考:vue+webpack+vue-router(history) 部署到nginx服務器下，非根目錄，前后端怎樣配置文件？
nginx配置proxy_pass
Nginx反向代理解決前后端聯(lián)調跨域問題
1.1vue打包
其中vue+webpack+vue-router(history) 部署到nginx服務器下，非根目錄，前后端怎樣配置文件這篇文章詳細說明了怎么打包vue項目,記得修改config下的index.js文件.
修改為:(只顯示修改的部分)
build: {
// Template for index.html
index: path.resolve(__dirname, "../dist/index.html"),
// Paths
assetsRoot: path.resolve(__dirname, "../dist/myweb"),
assetsSubDirectory: "static",
assetsPublicPath: "/myweb/", //和router對應的base配置一致
1.2nginx反向配置
關于nginx的配置,一定需要注意第二篇文章說到的問題;
1、location /test/ {
proxy_pass http://t6:8300;
}
2、location /test/ {
proxy_pass http://t6:8300/;
}
proxy_pass轉發(fā)的路徑后是否帶 “/” 的意義都是不一樣的,假設有請求http://true_server/test/index.html,如果配置是第一種情況,不帶"/"的話,那么訪問的實際是
http://t6:8300/index.html,直接訪問根路徑,如果帶"/",那么訪問的實際是"http://t6:8300/test/index.html",以"/test"作為根路徑.
具體配置如下:
#user nobody;
worker_processes 1;
error_log logs/error.log notice;
events {
worker_connections 1024;
}
http {
include mime.types;
#include blocksip.conf;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8999;
server_name localhost;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location / {
root E:/_ex_workplace/pweb/dist;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /api/ {
rewrite ^/api/(.*)$ /$1 break; #所有對后端的請求加一個api前綴方便區(qū)分，真正訪問的時候移除這個前綴
# API Server
proxy_pass http://132.122.14.6:9800/; #將真正的請求代理到serverB,即真實的服務器地址，ajax的url為/api/user/1的請求將會訪問http://www.serverB.com/user/1
}
location @router {
rewrite ^.*$ /index.html last;
}
}
}
2.部署到tomcat下
2.1vue項目的路由配置
因為項目上線，一般需要添加項目名，并且消去vue-router產生的#號，需要在router的配置下，在本項目是router->index.js下配置：
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
base: "/webSite/", //項目名稱 訪問路由頁面都需要加上這個,訪問的根路徑為http://ip:port/webSite
mode: "history", //消去#
routes: [
{
path: "/test",
name: "test",
component: resolve => require(["@/pages/test"], resolve)
}]
})
2.2vue項目的靜態(tài)資源配置
在打包后,會生成dist文件，文件下由以下部分組成：
如果打開static里面的css會發(fā)現(xiàn)由如下文件：
這些css都是webpack打包生成的，并且上面提到的index.html文件會引用這些文件。
如果不修改config下的index文件，打包生成的index.html對這些文件引用被打包為：
<script type=text/javascript src=/static/js/vendor.0ee9deae193305689fa2.js> </script>顯然這是不合理的，因為我們已經配置了根路徑為http://ip:port/webSite，所以我們需要修改config下的index.js文件的內容：
找到index.js文件，找到build對象：
修改為assetsPublicPath的值為與上面的base的取值一致。
build: {
// Template for index.html
index: path.resolve(__dirname, "../dist/index.html"),
// Paths
assetsRoot: path.resolve(__dirname, "../dist"),
assetsSubDirectory: "static",
assetsPublicPath: "/webSite/",
productionSourceMap: true,
devtool: "#source-map",
productionGzip: false,
productionGzipExtensions: ["js", "css"],
bundleAnalyzerReport: process.env.npm_config_report
}
2.3vue項目配置完畢
至此，整個vue項目算是配置完畢，但是部署到tomcat下會出現(xiàn)訪問圖片沒有帶根路徑的問題，如果你引用圖片的方式和我一致，如下：
<img :src="'../../static/images/'+code+'.png'" alt="icon">
那么可以嘗試的解決方法是，重新配置tomcat的；
2.4tomcat的配置
首先在tomcat的webapps新建文件夾，文件夾名稱和上面配置的根路徑一致，即為webSite，然后將打包生成的dist文件夾里面的文件復制到webSite下，并且新建文件 WEB-INF/web.xml:
項目結構為：
2.5配置靜態(tài)資源服務
2.5.5.1修改server.xml文件
找到tomcat的conf文件下的server.xml，配置靜態(tài)服務,找到HOST標簽：
這里的配置為：
<Host name="localhost" appBase="webapps"
unpackWARs="true" autoDeploy="true">
<!-- SingleSignOn valve, share authentication between web applications
Documentation at: /docs/config/valve.html -->
<!--
<Valve className="org.apache.catalina.authenticator.SingleSignOn" />
-->
<!-- Access log processes all example.
Documentation at: /docs/config/valve.html
Note: The pattern used is equivalent to using pattern="common" -->
<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
prefix="localhost_access_log" suffix=".txt"
pattern="%h %l %u %t "%r" %s %b" />
<Context path="" docBase="webSite" reloadable="false" />
</Host>
2.5.5.2修改新增的web.xml文件
增加這個文件是因為，解除#號，參考官網：
去除vue項目的#號
這里就直接丟配置了：
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0"
metadata-complete="true">
<display-name>webapp</display-name>
<description>
webapp
</description>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
