# 一、vue.config.js 常見配置 1. publicPath、outputDir、assetsDir、indexPath、productionSourceMap 選項：npm run build 打包配置選項 2. css 選項：less、sass 全局樣式配置選項 3. devServer 選項：npm run dev 啟動配置、后端服務代理配置 。 ~~~js const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ // 項目部署的基本路徑，默認 "/" publicPath: process.env.NODE_ENV === "production" ? "./" : "/", // 項目打包的根目錄，默認 "dist" outputDir: "dist", // 項目打包的靜態資源存放目錄，默認 "" assetsDir: "", // 項目打包的index.html輸出路徑，默認 "index.html" indexPath: "index.html", // 多頁應用配置參數，默認 undefined pages: undefined, // 開發環境 eslint 異常信息提示位置，默認 "default" 在瀏覽器窗口提示，為 true 在控制臺提示 lintOnSave: "default", // 項目打包是否生成js的 source map 調試包，默認 true，生產部署設置為false productionSourceMap: false, // css 配置 css: { // 是否將組件中的 CSS 提取至一個獨立的 CSS 文件中、生產環境下默認 true，開發環境下默認 false extract: true, // 是否開啟 css 的 source map 調試，默認 false sourceMap: false, // 配置css的loader選項：css-loader、postcss-loader、less-loader、sass-loader，stylus-loader，默認 {} loaderOptions: {}, }, // devServer 支持 webpack-dev-server 所有選項 devServer: { open: true, host: "localhost", port: 8080, hot: true, https: false, proxy: { "/api": { target: "http://localhost:3000", // 后端服務域名 secure: false, // 是否支持 https，默認 false ws: true, // 是否支持 websocket changeOrigin: true, // 是否支持跨域 pathRewrite: { "^/": "/", // 路徑片段重寫 }, }, "/otherapi": { target: "http://localhost:3001", // 后端服務域名 secure: false, // 是否支持 https，默認 false ws: true, // 是否支持 websocket changeOrigin: true, // 是否支持跨域 pathRewrite: { "^/": "/", // 路徑片段重寫 }, }, }, }, // 插件配置選項 pluginOptions: { foo: { // 插件可以作為 `options.pluginOptions.foo` 訪問這些選項。 }, }, // babel-loader 是否處理 node_modules 中的依賴包，處理哪些依賴包，參數類型: boolean | Array<string | RegExp> transpileDependencies: true, }); ~~~ # 二、打包部署測試 1. 打包 ~~~js npm run build ~~~ 2. 啟動本地服務測試 ~~~js // 全局安裝 npm install http-server -g // 在 dist 根目錄下執行 http-server // 在瀏覽器上打開 url ~~~