1,常用命令

1，先安装node.js


2，安装脚手架：npm install -g @vue/cli

3，安装依赖：(c)npm install

4，安装webpack：npm install —save-dev webpack-cli

5，VUE源码打包：npm run build

6，设置淘宝镜像(cnpm)：npm install -g cnpm —registry=https://registry.npm.taobao.org

7，服务器配置：https://router.vuejs.org/zh/guide/essentials/history-mode.html

8，Ruoyi-vue构建测试环境：npm run build:stage

9，Ruoyi-vue构建生成环境：npm run build:prod

10,安装插件：npm install —save axios

2,后端配置

注意：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用 Vue CLI 的publicPath选项 和相关的 routerbaseproperty。你还需要把下列示例中的根目录调整成为子目录 (例如用 RewriteBase /name-of-your-subfolder/ 替换掉 RewriteBase /)。

#Apache

  1. <IfModule mod_rewrite.c>
  2.   RewriteEngine On
  3.   RewriteBase /
  4.   RewriteRule ^index\.html$ - [L]
  5.   RewriteCond %{REQUEST_FILENAME} !-f
  6.   RewriteCond %{REQUEST_FILENAME} !-d
  7.   RewriteRule . /index.html [L]
  8. </IfModule>

除了 mod_rewrite，你也可以使用 FallbackResource。

#nginx

  1. location / {
  2.     try_files $uri $uri/ /index.html;
  3. }

#原生 Node.js

  1. const http = require('http')
  2. const fs = require('fs')
  3. const httpPort = 80
  5. http.createServer((req, res) => {
  6.   fs.readFile('index.html', 'utf-8', (err, content) => {
  7.       if (err) {
  8.       console.log('We cannot open "index.html" file.')
  9.     }
  11.   res.writeHead(200, {
  12.   'Content-Type': 'text/html; charset=utf-8'
  13.   })
  15. res.end(content)
  16. })}).listen(httpPort, () => {
  17. console.log('Server listening on: http://localhost:%s', httpPort)})

#基于 Node.js 的 Express

对于 Node.js/Express，请考虑使用 connect-history-api-fallback 中间件。

#Internet Information Services (IIS)

  1. 安装 IIS UrlRewrite
    2. 在你的网站根目录中创建一个 web.config 文件，内容如下：
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <configuration>
    3. <system.webServer>
    4.  <rewrite>
    5.    <rules>
    6.      <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
    7.        <match url="(.*)" />
    8.        <conditions logicalGrouping="MatchAll">
    9.        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    10.        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    11.        </conditions>
    12.        <action type="Rewrite" url="/" />
    13.      </rule>
    14.    </rules>
    15.  </rewrite>
    16. </system.webServer>
    17. </configuration>

    #Caddy

    1. rewrite {
    2. regexp .*
    3. to {path} /
    4. }

    #Firebase 主机

    在你的 firebase.json 中加入：
    1. {
    2. "hosting": {
    3.  "public": "dist",
    4.  "rewrites": [
    5.    {
    6.      "source": "**",
    7.      "destination": "/index.html"
    8.    }
    9.  ]
    10. }
    11. }

    #警告

    给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
    1. const router = new VueRouter({
    2. mode: 'history',
    3. routes: [
    4.    { path: '*', component: NotFoundComponent }
    5. ]
    6. })
    或者，如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。