vue+webpack+vue-router(history) 部署到nginx服务器下，非根目录，前后端怎样配置文件

原文地址：https://www.jianshu.com/p/a376d8a5f6f8

前端配置

第一步：配置router

export default new Router({

  mode: 'history',  // 将模式转换成history

  base: '/kmf/',    // 配置路由的根目录

})

第二步：配置webpack中config的index.js

build: {

    ···

    assetsRoot: path.resolve(__dirname, '../dist/kmf'), // 将静态文件通过npm run build存到dist的lmf文件夹中，看需求（如果需要静态文件与index.html同级，就不用写/kmf了）

    assetsSubDirectory: 'static',

    assetsPublicPath: '/kmf/', // 所有的文件从根目录下的kmf中获取，达到本分享的主题"非根目录，前后端怎样配置文件"

    ···}

后端

一、Apache配置

<IfModule mod_rewrite.c>
//将RewriteEngine引擎设置为on，就是让url重写生效
  RewriteEngine On
  //设置了目录级重写的基准URL
RewriteBase /
  RewriteRule ^index.html$ - [L]
 //如果访问的文件不存在
  RewriteCond %{REQUEST_FILENAME} !-f
//如果访问的目录不存在
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /kmf/index.html [L]//根据项目路径设置对应内容
</IfModule>

 二、IIS后台配置

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <clear />
                <rule name="Https" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                        <add input="{HTTPS}" pattern="^OFF$" />
                    </conditions>
                    <action type="Redirect" url="HTTPS://{HTTP_HOST}/{R:1}" />
                </rule>
                <rule name="已导入的规则 1" stopProcessing="true">
                    <match url="^index.html$" ignoreCase="false" />
                    <action type="None" />
                </rule>
                <rule name="已导入的规则 2" stopProcessing="true">
                    <match url="." ignoreCase="false" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/kmf/index.html" />
                </rule>
            </rules>
        </rewrite>
        <httpErrors>
            <remove statusCode="404" subStatusCode="-1" />
            <error statusCode="404" prefixLanguageFilePath="" path="/public/index.php" responseMode="ExecuteURL" />
        </httpErrors>
    </system.webServer>
</configuration>