創建vue項目

1.創建項目

$ npm init @vitejs/app

2. 啟動項目

$ cd vite-project
$ npm install
$ npm run dev

3. 可以訪問項目了。
   目前這個項目自由一個頁面app.vue這個頁面是引入了helloworld.vue這個組件，并且向這個組件中注入數據。helloworld.vue中引入了defineprosp屬性來接收父組件傳遞過來的值。
4. 做一個認證系統
   需要路由來跳轉。

創建express

（1）方法二

$ yarn init -y \\初始化json
$ yarn add express \\安裝express包

這個方法不是用express建立的項目，需要自己一點點搭建項目。
（2）官方教程
安裝 Express - Express 中文文檔 | Express 中文網 (expressjs.com.cn)

這個方法也非常的不錯。

安裝nodemon實現網站修改后自動啟動

（1）安裝nodemon

$ yarn add nodemon

然后再package.json文件中加入

{
  "name": "2pro",
  "version": "1.0.0",
  "main": "index.js",
//加入的內容
  "scripts": {
    "start": "node app",
    "dev": "nodemon app"
  },
//
  "license": "MIT"
}

啟動服務器

$ yarn run dev

修改npm run build 路徑

修改vite.config.js文件為：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build:{
    outDir:'./server/dist'
  }
})

參考資料為：

vite.config.js常用配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    // 要用到的插件數組
      plugins: [vue()],
      // 開發或生產環境服務的公共基礎路徑,可以是/foo/、https://foo.com/、空字符串或./(用于開發環境) 幾種類型，這個選項也可以通過命令行參數指定（例：vite build --base=/my/public/path/）
      base: './',
      // 靜態資源服務的文件夾, 默認"public"
      publicDir: 'public',
      css: {
          postcss: {
              plugins: [
                  require('autoprefixer')
              ]
          }
      },
      server: {
          // 服務器主機名，如果允許外部訪問，可設置為"0.0.0.0"
          host: '0.0.0.0',
          // 服務器端口號
          port: 3000,
          // boolean | string 啟動項目時自動在瀏覽器打開應用程序；如果為string，比如"/index.html"，會打開http://localhost:3000/index.html
          open: false,
          // 自定義代理規則
          proxy: {
              '/api': {
                  target: 'http://jsonplaceholder.typicode.com',
                  changeOrigin: true,
                  rewrite: (path) => path.replace(/^\/api/, '')
              }
          }
      },
      build: {
          // 指定輸出路徑，默認'dist'
          outDir: 'dist',
          // 指定生成靜態資源的存放路徑(相對于build.outDir)
          assetsDir: 'assets',
          // 小于此閾值的導入或引用資源將內聯為base64編碼，設置為0可禁用此項。默認4096（4kb）
          assetsInlineLimit: '4096',
          // 啟用/禁用CSS代碼拆分，如果禁用，整個項目的所有CSS將被提取到一個CSS文件中,默認true
          cssCodeSplit: true,
          // 構建后是否生成source map文件，默認false
          sourcemap: false,
          // 為true時，會生成manifest.json文件，用于后端集成
          manifest: false
      }
})