服務器小白如何將VUE項目部署到服務器

最近工做上的事情，領導讓用VUE寫個前端出來， 因爲部門的人大多負責後臺，前端的大多數事務，就直接包到我頭上來了。估計後續我VUE寫完，也沒人負責把網頁部署到服務器上，那麼咋辦，只能本身來了。
對於服務器來講，能夠說是一個小白了。能夠說什麼都是從0開始。 這篇文章不說VUE怎麼怎麼寫，

一、購買騰訊雲免費服務器

騰訊雲打錢😁😁

買了服務器以後，登陸服務器以後，發現是 CentOS，就是一片黑，只能輸入命令行，咱也不懂咱也不敢問，通過一頓搜索並不知道怎麼回事。

而後我決定給他重裝成Windows，CentOS看不懂我還會看不懂Windows嗎？

大概就是這樣

系統重裝 Windows以後，不能在瀏覽器登陸了，騰訊雲給了這個選項

由於我是Mac因此就選第三個，其餘的請自行研究了....

二、安裝Microsoft Remote Desktop for Mac

跟着教程安裝完

配置服務器地址

而後輸入系統帳號密碼就能夠連上了。

三、文件傳輸

在我查找了不少資料的過程當中，發現給Windows傳文件是很痛苦的一個過程。
多是我沒有找到正確的姿式吧。

這裏咱們經過共享文件夾傳文件，有點像虛擬機。

進去以後選擇 Floders

而後啓動咱們的服務器，在 個人電腦界面就能看到咱們如今手上的這臺設備了。

由於是遠程鏈接。因此可能啥的都有可能比較慢(也有多是免費版本的服務器就是這樣= =)

四、服務器中安裝及配置Tomcat

百度經驗：jingyan.baidu.com/article/870…

咱們這裏只要走兩步就行，不用配置eclipse

1. 安裝Java環境 JDK
2. 配置Tomcat 
複製代碼

這裏就不贅述了。照着這個教程一步一步來。

五、Vue打包 及 路徑配置

我在這位老哥這裏找到了配置辦法

1. 假設你要訪問的項目名稱爲hms
2. 在Tomcat的webapps下建立hms文件夾，
3. 在config/index.js文件中，設置assetsPublicPath: '/hms/'
   （解釋：這裏改成這個配置以後，最後編譯產生的index.html中相關路徑也會帶上‘/hms’,不會報404的錯誤了）
   配置productionSourceMap: false
   在build/webpack.prod.config.js文件中，找到output，添加publicPath:'./'

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    publicPath:'./'
  },
複製代碼

在build/webpack.base.config.js文件中，同樣找到output

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? "./"+config.build.assetsPublicPath
      : "./"+config.dev.assetsPublicPath
  },
複製代碼

4. 在cd Vue項目路徑運行npm run build命令，生成dist文件夾，包含static和index.html
5. 將dist文件夾中static和index.html複製到Tomcat中webapps的hms文件夾中
6. 啓動Tomcat，ip:port/hms，例如：http://localhost:8081/hms/ 便可訪問到Vue項目。也能夠直接把服務器的地址貼上去 http://182.xxx.xxx.xxx:8080/hms