如何在部署Vue应用程序时更改基本路径

Question

如何在部署Vue应用程序时更改基本路径

vue.jswebpackvuejs2github-pagesvue-cli

10

我有一个Vue 2.0的Web应用程序，在我的电脑上可以无问题运行，但似乎我无法在不将应用程序运行在根目录的情况下在服务器上运行它。

例如：'www.someserver.com/my-app/'而不是 'www.someserver.com/'。

我使用了 webpack-simple 模板，它具有基本的Webpack配置。如何确保该应用程序从文件夹加载而不是根目录加载？

- Titulum

1

啊，我明白你的意思了。所以在构建时，资产没有从正确的位置加载。因此，您需要根据process.env.NODE_ENV修改publicPath变量。 - Ohgodwhy

我已经尝试过类似的东西，但是我做不对。我目前正在使用这个webpack配置。你能否看一下它，然后告诉我如何做呢？ - Titulum

5个回答

9

假设你的服务器已经在你想要访问的URL上提供了HTML/JS捆绑包....如果你使用vue-router，你还需要在那里设置基本路径。

const router = new VueRouter({
  base: "/my-app/",
  routes
})

- Leo Bartkus

那么问题可能是您的服务器未配置在该URL上提供页面。您是否检查了IIS或Express配置？您应该编辑您的问题以显示您正在遇到的错误。 - Leo Bartkus

这是用于部署到 github-pages 的，因此我无法编辑或查看Web服务器的设置。 - Titulum

感谢Leo Bartkus。 - Shahriar Ahmad

3

在使用VUE 3和vite的时候：

在vite.config.ts文件中：


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue({
            reactivityTransform: true
        })
    ],

    base: '/myNewFolder/',
})

更多信息： https://vitejs.dev/config/#base

- Emmanuel

3

我找到了解决方法。我确实需要编辑我的webpack.config.js文件中的publicPath条目，像这样：

var path = require('path')
var webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  plugins: [new ExtractTextPlugin("main.css")],
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {

  module.exports.output.publicPath = '/<REPO_NAME>/dist/';

  module.exports.devtool = '#source-map';
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    /*new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),*/
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

注意在production部分中的<REPO_NAME> publicPath条目。

接下来，我还需要更新我的index.html中的链接，使用点符号表示法而不是普通的相对路径：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>listz-app</title>
  <link rel="stylesheet" href="./dist/main.css">
</head>

<body>
  <div id="app"></div>
  <script src="./dist/build.js"></script>
</body>

</html>

这个配置可以用来部署Vue-cli 2.0网站应用到Github Pages。

- Titulum

2

最近这对我来说是个问题。上述解决方案都没有起作用。

以下解决方案适用于 vue 2.6 和 vue-router 3.1

我所做的就是像这个git issue中建议的那样，在vue.config.js中添加相对路径：

  module.exports = {
      publicPath: './',
      // Your config here
  }

但这并不是完整的解决方案，因为路由器视图没有被渲染，所以需要在路由器中添加一个基本路径。该基本路径必须与 vue.config.js 的 publicPath 相同，可以使用 location.pathname 来实现，正如此论坛问题建议的那样。

在 router.js 中的完整解决方案如下：

mode: 'history',
base: location.pathname,
routes: [
  // Your routes here
]

- fifoq

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ailtonbsj · Accepted Answer

在文件vue.config.js中

module.exports = {
  /* ... */
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/'
}

在文件router.js中

/* ... */
import { publicPath } from '../vue.config'
/* ... */
export default new Router({
    mode: 'history',
    base: publicPath,
    /* ... */
})