Question

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

1 / assetsPublicPath

中的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 / base配置中的vue-router选项似乎也只接受绝对路径......

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

所以，当我指定正确的未来网址时它会起作用，但是如果服务器被修改则不是“未来证据”......

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

Answer 1

我知道你写完这篇文章后一切都发生了变化。但是目前使用Vue和Vue Cli的最后一个版本你可以使用vue配置文件获取它（我不是这个平台的专家）：

在项目的主路径上创建“vue.config.js”文件
给出相对路径。例如：

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

它不能与css中添加的字体一起使用，我不知道为什么，我仍然在googlying。如果有人阅读可以提供帮助将会很棒。

Answer 2

绝对路径不必包含域名，只需从根目录开始即可。

考虑HTML5网址。例如，如果您的静态文件夹位于http://www.example.com/static且当前网址为http://www.example.com/users，则相对路径为../static。但是，如果您要查看用户的详细信息并转到http://www.example.com/users/john-doe，相对路径将为../../static。如果您不知道它们在哪里，则无法加载资产，这就是您需要一个起点，即绝对URL的原因。

你害怕的问题是什么？你可以说得更详细点吗？

Answer 3

我已经通过以下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/'

Answer 4

使用vue-cli 4.5.7，我必须编辑./config/index.js并更改为相对值：assetsPublicPath: './',您可以同时为dev:{}和build:{}进行操作。最初只是'/'。

Vuejs，难以用相对路径构建

4 个答案: