vue项目改history模式

前端配置：
①webpack.config.js中设置devServer项中proxy

// 以下的各种写法都可以实现：例如对 /api/users 的请求会将请求代理到 http://xxx.com/api/users
devServer:{
  // 写法一：
  proxy: {
          '/api': 'http://xxx.com/',
       },
  // 写法二：
  proxy: {
          '/api': {
                    target: 'http://xxx.com/',
                    pathRewrite: { '^/api': '/api' },// http://xxx.com/api/xxx
                    // pathRewrite: { '^/api': '/' },// http://xxx.com/xxx
                  },
        },
  // 写法三（可以将多个特定路径代理到同一目标）：
  proxy: [
            {
                context: ['/api'],
                target: 'http://xxx.com/'
            },
        ],
}

// 输出添加：publicPath: '/'
output: {
          filename: 'js/[name].[hash].js',
          path: path.resolve(__dirname, '../dist'),
          publicPath: '/',
        },

实践过程中碰到了一个问题，就是这么配置context:['/']，结果刷新url变成了这样(如下图)。修改成context:['/api']就可以了

image.png

②此时刷新页面刷新显示Cannot Get(下图)。解决方式：在webpack.config.js中设置devServer项中historyApiFallback

image.png

// history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
 historyApiFallback: {
                        //与output的publicPath有关(HTMLplugin生成的html默认为index.html)
                        index: '/index.html',
                      },

至此，前端部分配置完毕。但如果直接访问http://xxx/home，静态服务器会去目标目录下寻找home文件，目标目录下有这个文件吗？没有！所以自然就404了。所以Nginx添加如下代码：

 location / {
                root /xxx/dist;// 包地址
                try_files $uri $uri/ /index.html;
                // $uri是nginx中的变量，比如我访问的网址是http://xxx/home，那么它就代表的/home。
             }