Vue項目部署在非網站根目錄的解決方案

這篇文章主要介紹了在實際開發中遇到Vue項目編譯後部署在非網站根目錄的問題，經過搜索學習獲得的解決方案。

本次域名環境：
www.admin.com/version1/

修改配置文件

1. 修改打包後的資源引用路徑
   找到config/index.js中build屬性下的assetsPublicPath
   把/修改成/version1/

build: {
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/version1/',
  ...
}

1. 修改打包後的樣式(圖片、視頻、字體文件等)引用路徑
   找到build/utils.js中
   添加或修改publicPath: '../../'

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

修改項目的路由

在路由的history模式下，全部的路由都是基於根路徑的，如/xxxx，因爲項目部署在/version下，咱們能夠修改路由來保證頁面正常訪問
咱們能夠來定義一個變量區分開發環境或生產環境

1. 找到config/dev.env.js，定義一個ROUTER_BASE的變量，值爲/，{表明開發環境是基於根目錄}

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ROUTER_BASE: '"/"'
})

1. 找到config/prod.env.js，定義一個ROUTER_BASE的變量，值爲/version1/，{表明生產環境是基於version1目錄}

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ROUTER_BASE: '"/version1/"'
})

1. vue-router裏提供了一個base的屬性，表明應用的基目錄

const routers = new Router({
 mode: 'history',
 base: process.env.ROUTER_BASE,
 ...
})

此時base能夠根據咱們定義的變量ROUTER_BASE來區分環境

至此，打包配置的相關修改已所有完成，項目也可以正常訪問。 但仍是會有一個問題，跳轉到某個路由後，刷新頁面，就gg了，頁面爲空白，此時就要修改nginx的配置了。

vue給的nginx配置是基於根目錄下的， 官方連接
咱們須要根據實際部署的網站目錄調整一下

location / {
 try_files $uri $uri/ /index.html; //官方指導

 // 須要修改成
 try_files $uri $uri/ /version1/index.html;
}

完美