湯尼的部落格

新手Vue筆記...

更換vite port

這樣就可以把預設的5173 prot 改成5000

--------------------------

export default defineConfig({
  plugins: [
        vue(),      
    ],

    server: { 
        port: 5000,
    },

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
      }

     
  }
})

-----------------------------------------

URI malformed會出現的情況

正確寫法  (Vite)

  <link rel="icon" href="/public/favicon.ico">  <!--vite 不要有這個%符號 不然可能會出現URI malformed錯誤-->

錯誤寫法

  <link rel="icon" href="<%= BASE_URL %>favicon.ico">  這是舊的webpack 還不是vite 所以不會報錯

-------------------------------------------------

Vite多頁面設定

google 關鍵字 vite Multi-Page App

教學A : https://stackoverflow.com/questions/77498366/how-do-i-setup-a-multi-page-app-using-vite

官方教學 : https://vitejs.dev/guide/build.html#multi-page-app

打 __dirname 就可以了 ~

---------------------------------------------------

自己vue.config.js程式碼

    //多頁面的設定 下面有幾個頁面 dist裡面的public就會有幾個檔案 //

    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'index.html'),
                product: resolve(__dirname, './public/product.html'),  //寫這樣就可以都連結到 但還是建議寫完整//
                animation: resolve(__dirname, './public/animation.html'),
                api: resolve(__dirname, './public/api.html'),
                api2: resolve(__dirname, './public/api.html'),

            },
        },
    },
 

---------------------------------------------------

app.vue的程式碼

 data: function () {
     return {

         //父元素 , 綁定子元素的props資料 . 選單列相關
         menuitems:
             [
                 { message: "首頁", html: "./index.html" },
                 { message: "產品", html: "public/product.html" },
                 { message: "css動畫", html: "public/animation.html" },
                 { message: "API", html: "public/api.html" },
                 { message: "建構中", html: "public/api.html" },
             ],

         ToggleMenu1: true
     }

 },

--------------------------------------------------