2016-12-30 60 views
4

我在运行npm run build时遇到困难,无法用相对路径进行正确构建。解决资产是容易的,但我不知道如何配置两件事情:Vuejs,难以用相对路径构建

1 /的assetsPublicPathconfig/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选择似乎只接受绝对路径了。 ..

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未来的工作,但如果不是“面向未来”,服务器被修改......

解决这个问题的任何想法是否可以解决?

回答

4

绝对路径不一定要包含域名,它只需要从根开始。

想想HTML5网址。例如,如果您的静态文件夹位于http://www.example.com/static,当前网址为http://www.example.com/users那么相对路径将为../static。但是,如果您试图查看用户的详细信息并转至http://www.example.com/users/john-doe,则相对路径将为../../static。如果您不知道它们的位置,则无法加载资源,这就是为什么您需要一个起点,一个绝对URL。

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

+0

好的,需要更高的精度!我有一台服务器用于多个应用程序,每个应用程序在服务器上都有一个专用文件夹,如'/ builds/app-name'。我使用绝对路径构建了所有应用程序,但我们正在迁移到另一个服务器与另一个体系结构,我将不得不重建所有应用程序......我想知道是否可以使用相对路径作为起点构建应用程序。这样我就可以在任何我想要的位置复制粘贴我的应用程序。 –

+1

这不是服务器上的路径,它是浏览器中的路径,从根开始。通过'http:// www.example.com /这/是/绝对/ path'。文件在服务器文件系统中的位置不相关,只要它被获取。 – motanelu

+0

今天我学到了东西,谢谢! –