Question

我有一个Vue 2.0 Web应用程序，它可以在我的计算机上正常运行，但是如果没有在根目录上运行该应用程序，我似乎无法使其在服务器上正常工作。

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

我使用了webpack-simple template，其中有this basic webpack configuration。如何确保该应用程序将从文件夹而不是根目录加载文件？

Answer 1

在文件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 2

假设当您转到所需的URL时，服务器已经在提供html / js捆绑包了。...如果使用的是vue-router，则还需要在其中设置基本路径。

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

Answer 3

我知道了。我确实必须编辑publicPath中的webpack.config.js条目，如下所示：

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
    })
  ])
}

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

接下来，我还必须更新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 Web应用程序部署到Github Pages。

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

3 个答案: