vue-cli 3.x distパスの変更

愚痴をこぼす
先端の世界は本当に奇妙で、更新速度は本当にロケットと同じです.本当にそれを爱する心がなくて、本当に歩き続けるのは難しいです.先日、Nodeの父Ryan Dahlが新しいオープンソースプロジェクトdenoを発表し、多くの注目を集めた.Ryan Dahl直言nodeは失敗品で、多くのバグと設計上の不合理さに満ちていて、彼も天に帰る力がありません...ああ、かわいそうに、私たちのような小さな先端、nodeはまだ始まっていません.もうすぐ終わります...はい、愚痴は愚痴に帰して、生活はまだ続けなければなりません.生命は止まらず,コードをかき回すだけではない.
webpack4
最近、あるプロジェクトでvue-cliを最新版の3.に更新しました.x.同時にwebpackも4に更新された.x.Webpack 4は、いくつかの構成の大部分を簡素化しています.最近ヒットした0配置開梱即用のパッケージングツールParcelの影響で、公式にもwebpack配置が少し煩わしいと感じているそうです.(試してみましたが、いくつかの小さなプロジェクトでは、確かに爽やかでした).Webpack 4の具体的な更新の詳細は公式サイトで見ることができますが、こちらは貼らないでください.Webpack 4ドキュメント
vue-cli 3.x
新しいvue-cliを使用して構築されたプロジェクトディレクトリも爽やかです.こちらが構築時に選んだのはManually featuresです.そして、プロジェクトパッケージ実行yarn buildのときにdistディレクトリのindexを開く.htmlはリソースが正しくロードされていないことを発見しました.入力パスを変更する必要があるアドレスをすぐに連想します.前のbuildとconfigフォルダがなくなったことに気まずい思いをしました.確認すると、カスタム構成が必要な場合は、プロジェクトのルートディレクトリにVue.config.jsを追加する必要があります.このファイルでは、いくつかのカスタマイズを行うことができます.

module.exports = {
    //     
    baseUrl: './',
    //          sourceMap   
    productionSourceMap: false,
    //       
    devServer: {
        port: 1234,
    },
}

前の操作と同じように/の前に.を直接付ければいいです
詳細設定

module.exports = {
 //     
 baseUrl: '/',
 //       
 outputDir: 'dist',
 // eslint-loader           
 lintOnSave: true,
 // use the full build with in-browser compiler?
 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 compiler: false,
 // webpack  
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // vue-loader    
 // https://vue-loader.vuejs.org/en/options.html
 vueLoader: {},
 //          sourceMap   
 productionSourceMap: true,
 // css    
 css: {
  //     css     ExtractTextPlugin
  extract: true,
  //    CSS source maps?
  sourceMap: false,
  // css      
  loaderOptions: {},
  //    CSS modules for all css / pre-processor files.
  modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 //     dll
 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 dll: false,
 // PWA       
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server     
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  proxy: null, //     
  before: app => {}
 },
 //        
 pluginOptions: {
  // ...
 }
}