VueJS 项目发布部署到服务器 修改目录结构后页面空白问题

 

在真实部署环境中，很难将dist生成的内容直接部署到服务器根目录。直接按默认配置build的项目无法在子文件夹中正常运行，需要进行如下配置：

例如：
将项目部署到服务器根目录下的project文件夹下：

修改Router index.js

Path：./src/router/index.js

Vue.use(Router)
export default new Router({
  mode: 'history', // 需要增加的地方
  base: '/project/', // 需要增加的地方
  routes: [
    {
      path: '/',
      name: 'HomePage',

修改config index.js

Path：./config/index.js

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/project/', // 需要修改的地方
    productionSourceMap: true,

此时，可以将build打包内容全部放入服务器根目录下的project文件中，并正常访问了。

还有一种解决办法，就是将mode设置为hash

let router = new Router({
  mode: 'hash',//设置成hash后就不用处理文件路径变化的问题了，但浏览器路径会带上/#,默认值为hash
 
  routes: routes
})

但是，现在刷新会有问题，需要开启服务器的重写功能。
VueJS官方指导文档

主要是修改nginx，下面这几话

 

nginx

1.第一种情况是没有修改文件目录，只修改mode:'history' 的情况。

location / {
  try_files $uri $uri/ /index.html;
}

2.第二种情况是更改了文件目录，如下需指定文件project。

location / {         
             index index.html;  
             if (!-e $request_filename) {
            rewrite ^/(.*) /project/index.html last;
            break;
          }             
        }

 

推荐几篇文章

https://blog.csdn.net/dq674362263/article/details/81876445

https://blog.csdn.net/weixin_39099609/article/details/80884546