2016-12-30 39 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

今天我學到了東西,謝謝! –