vue history模式 部署在服務(wù)器端的nginx配置 (非根目錄)

vue history需要nginx或者其他方式配置一下才可正確訪問，否則路由跳轉(zhuǎn)之后刷新一下便會出現(xiàn)404

最近遇到的問題是上了一個小的項目，需要放在更深層次的目錄下，上到測試環(huán)境 做了官網(wǎng)提到的nginx配置發(fā)現(xiàn)不行，之后查閱了一些博客資料，發(fā)現(xiàn)都沒有一個特別好的方案。最終，我的解決方案如下

nginx配置如下

server {

? ? ? ? listen? ? ? 443 ;

? ? ? ? server_name? m;

? ? ? ?

? ? ? ? root? html/mobile;

? ? ? ? location / {

? ? ? ? ? ? index? index.html index.htm;

? ? ? ? ? ? try_files $uri $uri/ /auth/index.html;

? ? ? ? }

? ? }

vue router 配置

// 路由配置

const RouterConfig = {

? base: "/auth/",

? mode: 'history',

? routes: routers

};

該項目是用的vue-cli2 所以只需要修改config 里面的index.js的build部分

webpack 配置修改

build: {

? ? // Template for index.html

? ? index: path.resolve(__dirname, '../dist/auth/index.html'),

? ? // Paths

? ? assetsRoot: path.resolve(__dirname, '../dist'),

? ? assetsSubDirectory: 'auth/static',

? ? assetsPublicPath: '/',

? ? /**

? ? * Source Maps

? ? */

? ? productionSourceMap: false,

? ? devtool: '#source-map',

? ? productionGzip: false,

? ? productionGzipExtensions: ['js', 'css'],

? ? bundleAnalyzerReport: process.env.npm_config_report

? }

最終項目地址為 m.xxx.com/auth/