web-dev-qa-db-ja.com

Vuejs、相対パスでビルドするのが難しい

npm run buildを実行すると、相対パスを使用して適切なビルドを作成することが困難になっています。アセットの解決は簡単ですが、2つの設定方法がわかりません。

1/config/index.jsのassetsPublicPath

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/ONLY_ABSOLUTE_PATH_ARE_ALLOWED/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

2/vue-router構成のbaseオプションは、絶対パスしか受け入れないようです...

const router = new VueRouter({
  mode: 'history',
  base: '/ABSOLUTE_PATH_ONLY/',
  routes: [
    { path: '/', redirect: '/fr/poster/home' },
    { path: '/:lang', redirect: '/:lang/poster/home' },
    {
      path: '/:lang/poster',
      component: PosterLayout,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          name: 'home',
          path: 'home',
          component: Home
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          name: 'themeCover',
          path: ':theme',
          component: ThemeCover
        }
      ]
    },
    {
      name: 'themeDetails',
      path: '/:lang/theme/:theme',
      component: ThemeDetails
    }
  ]
})

したがって、将来の正しいURLを指定したときに機能しますが、サーバーが変更された場合に備えて、「将来の保証」ではありません...

それが解決可能な場合、これを解決するためのアイデアはありますか？

webpackvue.jsvue-routervuejs2
10
George Abitbol

絶対パスにドメイン名を含める必要はありません。ルートから開始する必要があるだけです。

HTML5のURLについて考えてください。たとえば、静的フォルダがhttp://www.example.com/staticにあり、現在のURLがhttp://www.example.com/usersの場合、相対パスは../staticになります。ただし、ユーザーの詳細を表示してhttp://www.example.com/users/john-doeにアクセスしようとすると、相対パスは../../staticになります。アセットがどこにあるかわからない場合、アセットをロードできません。そのため、開始点、絶対URLが必要です。

あなたが恐れている問題は何ですか？より具体的にできますか？

3
motanelu

あなたが投稿を書いてからすべてが変わったことを知っています。しかし、現時点でVueおよびVue Cliの最新バージョンでは、vue構成ファイル（私はこのプラットフォームの専門家ではありません）：

  1. プロジェクトのメインパスに「vue.config.js」ファイルを作成します

  2. 相対パスを与える。例：

    module.exports = {
        publicPath: './'
    };

それはcssで追加されたフォントでは機能しません。理由はわかりません。誰かが読書を手伝うことができれば素晴らしいでしょう。

23
J.S.R - Silicornio

次のvue.config.js設定で問題を解決しました：

module.exports = {
    publicPath: process.env.BASE_URL,
    assetsDir: process.env.BASE_URL
};

webpack.config.jsを変更することで、output.publicPathでも同じことができると思います。リファレンス： https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules

publicPath: process.env.BASE_URL + '/static/'も実行できます

0
ADM-IT