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>