Vuejs, 상대 경로로 구축하기 어려움

Vuejs, 상대 경로로 구축하기 어려움

달리기를 할 때 상대적인 경로로 제대로 된 체격을 갖추기란 어려움에 직면해 있다.npm run build. 자산 해결은 쉽지만 두 가지를 어떻게 구성해야 할지 모르겠다.

1/ TheassetsPublicPath에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/ Thebase의 옵션.vue-routerconfig도 절대 경로만 받아들이는 것 같아...

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을 지정했을 때 작동하지만, 만약의 경우 "미래 증거"가 아니라 서버가 수정될 경우...

해결 가능하다면 이 문제를 해결할 수 있는 아이디어가 있으십니까?

네가 글을 써서 모든 게 변했다는 걸 알아.그러나 현재 Vue 및 Vue Cli의 마지막 버전을 사용하면 Vue 구성 파일을 사용할 수 있다(나는 이 플랫폼의 전문가가 아님).

1. 프로젝트의 기본 경로에 "vue.config.js" 파일 만들기

2. 상대적인 경로를 지정하십시오.예:

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

css에 추가된 글꼴로는 작동이 안 되는데, 왜 그런지 모르겠고, 나는 아직도 구글링을 하고 있어.만약 누군가 책을 읽을 수 있다면 도움이 될 것이다.

나는 다음과 같이 나의 문제를 해결했다.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/'

절대 경로는 도메인 이름을 포함할 필요가 없고 루트부터 시작하면 된다.

HTML5 URL에 대해 생각해 보십시오.예를 들어 정적 폴더가 있는 경우http://www.example.com/static그리고 현재 URL은http://www.example.com/users그러면 상대적인 경로는../static. 단, 사용자의 세부 정보를 보고 다음 주소로 이동하려는 경우http://www.example.com/users/john-doe, 상대적인 경로는../../static. 자산이 어디에 있는지 모르면 로딩할 수 없기 때문에 출발점, 절대 URL이 필요하다.

네가 두려워하는 문제는 뭐야?좀 더 구체적일 수는 없나요?

나는 vue-cli 4.5.7로 편집해야 했다../config/index.js관련 항목으로 변경:assetsPublicPath: './',둘 다 할 수 있다.dev:{}그리고build:{}.원래는 그저 그랬다.'/'.

Vue 3와 Vite 조합은 편집해야 했다.vite.config.js파일(이미 존재함)과 폴더 이름을base매개 변수

// https://vitejs.dev/config/
export default defineConfig({
    base: './', // Path relative to project root
    ...
})

참조URL: https://stackoverflow.com/questions/41395641/vuejs-difficulties-to-build-with-relative-path