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

Question

我有一个 Vue 2.0 网络应用程序，它在我的计算机上运行没有问题，但如果根目录中没有应用程序运行，我似乎无法让它在服务器上运行。

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

我用的是webpack-simple template which has this basic webpack configuration。我怎样才能确保应用程序将从文件夹而不是根目录加载文件？

Answer 1

假设您的服务器已经在为您的 html/js 包提供服务，当您转到您想要的 url 时....如果您使用的是 vue-router，您还需要设置基本路径那里。

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

Answer 2

我明白了。我确实不得不编辑 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。

Answer 3

在文件中 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,
    /* ... */
})

Answer 4

最近这对我来说是个问题。并且上述解决方案均无效。

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

我所做的是按照 vue.config.js 中建议的 in this git issue 添加一个相对路径：

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

但这并不是完整的解决方案，因为未呈现路由器视图，因此有必要在路由器中添加基本路径。基本路径必须与 vue.config.js's publicPath 相同，为此使用 location.pathname，如 in this forum question 所建议。 router.js中的完整解是：

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

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

How to change basepath on deployment of Vue app

github-pages

webpack

vue.js

vuejs2

vue-cli