Vuejs，使用相对路径构建的困难

Posted 2023-02-22

【中文标题】Vuejs，使用相对路径构建的困难

【英文标题】：Vuejs, Difficulties to build with relative path

【发布时间】：2017-05-14 17:16:17

【问题描述】：

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

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 时它可以工作，但它不是“未来证明”，以防服务器被修改......

如果可以解决的话，有什么想法可以解决吗？

【参考方案1】：

我知道自从你写了这篇文章后一切都变了。但此时使用最新版本的 Vue 和 Vue Cli，您可以通过 vue 配置文件获得它（我不是这个平台的专家）：

在项目主路径下创建“vue.config.js”文件

给出一个相对路径。示例：

    module.exports = 
        publicPath: './'
    ;

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

【讨论】：

如果不行，请注明您使用的Vue版本，以便人们可以帮助您。目前我没有使用 Vue，我不知道上一个版本是否有所改变。

嗨，我创建了一个带有 publicPath: './' 的 vue.config.js。但是，构建中未添加相对路径。例如： 我想要添加 './'前。我正在使用@vue/cli 4.3.1。谢谢

【参考方案2】：

我已经通过以下vue.config.js 设置解决了我的问题：

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

我认为您也可以通过更改output.publicPath 来对webpack.config.js 执行相同的操作。 参考：https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules

你也可以publicPath: process.env.BASE_URL + '/static/'

【参考方案3】：

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

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

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

【讨论】：

好的，需要更高的精度！我有一个用于多个应用程序的服务器，每个应用程序在服务器上都有一个专用文件夹，例如 /builds/app-name。我使用绝对路径构建了所有应用程序，但是我们正在迁移到具有另一种架构的另一台服务器，我将不得不重新构建所有应用程序......我想知道是否可以使用相对路径作为起点来构建应用程序.这样我就可以将我的应用复制粘贴到任何我想要的地方。

这不是服务器上的路径，是浏览器中的路径，从根开始。 http://www.example.com/this/is/absolute/path。文件在服务器文件系统中的位置无关紧要，只要它得到服务即可。

【参考方案4】：

使用 vue-cli 4.5.7 我必须编辑 ./config/index.js 并更改为相对：assetsPublicPath: './', 您可以为 dev: 和 build: 执行此操作。原来只是'/'。