Vuejs，相对路径构建困难 [英] Vuejs, Difficulties to build with relative path

问题描述

当我运行 npm run build 时，我在使用相对路径进行正确构建时遇到了困难.解析资产很容易，但我不知道如何配置两件事:

I'm facing difficulties to make a proper build with a relative path when I run npm run build. Resolving assets is easy but I don't know how to configure 2 things:

1/config/index.js

// 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 选项似乎也只接受绝对路径...

2/ The base option in the vue-router config seems to accept only absolute path too...

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 时它会起作用，但它不是未来证明"，以防服务器被修改...

So, it works when I specified the correct future URL, but it's not "future proof" in case, the server is modified...

如果可以解决这个问题，有什么想法可以解决吗?

Any ideas to solve this if it's solvable?

推荐答案

我知道从你写这篇文章后一切都变了.但是现在使用最新版本的 Vue 和 Vue Cli，您可以通过 vue 配置文件获得它(我不是这个平台的专家):

I know everything has changed from you wrote the post. But at this moment with the last version of Vue and Vue Cli you can get it with the vue config file (I am not an expert in this platform):

1. 在你的项目主路径创建一个vue.config.js"文件

1. Create a "vue.config.js" file at the main path of your project

给出一个相对路径.示例:

Give a relative path. Example:

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

它不适用于在 css 中添加的字体，我不知道为什么，我仍然在谷歌搜索.如果有人阅读可以提供帮助，那就太好了.

It is not working with fonts added in css, I don't know why and I am still googlying. If anyone reading can help will be great.

这篇关于Vuejs，相对路径构建困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！