vue3以上版本項目打包配置

開發完畢，build 項目，生成dist文件夾，將內容打包
vue3 以上版本中須要在根目錄下新建 vue.config.js 並加上以下配置

module.exports = {
    /** 區分打包環境與開發環境
     * process.env.NODE_ENV==='production'  (打包環境)
     * process.env.NODE_ENV==='development' (開發環境)
     * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
     */

    // 項目部署的基礎路徑

    // 咱們默認假設你的應用將會部署在域名的根部,

    // 例如 https://www.my-app.com/

    // 若是你的應用部署在一個子路徑下，那麼你須要在這裏

    // 指定子路徑。好比將你的應用部署在

    // https://www.foobar.com/my-app/

    // 那麼將這個值改成 '/my-app/'

    publicPath: "./", // 構建好的文件輸出到哪裏

    outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存時使用‘eslint-loader’進行檢查 // 有效值: true | false | 'error' // 當設置爲‘error’時，檢查出的錯誤會觸發編譯失敗

    lintOnSave: true, // 使用帶有瀏覽器內編譯器的完整構建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

    runtimeCompiler: false, // babel-loader默認會跳過`node_modules`依賴. // 經過這個選項能夠顯示轉譯一個依賴

    transpileDependencies: [
        /* string or regex */
    ], // 是否爲生產環境構建生成sourceMap?

    productionSourceMap: false, // 調整內部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

    chainWebpack: () => {},

    configureWebpack: () => {}, // CSS 相關選項

    css: {
        // 將組件內部的css提取到一個單獨的css文件（只用在生產環境）

        // 也能夠是傳遞給 extract-text-webpack-plugin 的選項對象

        extract: true, // 容許生成 CSS source maps?

        sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }

        loaderOptions: {}, // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.

        requireModuleExtension: 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, // PWA 插件相關配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

    pwa: {}, // configure webpack-dev-server behavior

    devServer: {
        open: process.platform === "darwin",

        disableHostCheck: false,

        host: "127.0.0.1",

        port: 8000,

        https: false,

        hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy

        proxy: null // string | Object

        // before: app => {}
    }, // 第三方插件配置
    pluginOptions: {
        // ...
    }
};

再使用終端命令 執行 npm run build

npm run build

這條命令就至關於:

vue-cli-service build
//我在win10下執行這條命令報錯了。
//commod not found

若是不加如vue.config.js 打包後訪問主頁，可能產生css 等資源文件沒法加載 404異常
出現"Failed to load resource: net::ERR_FILE_NOT_FOUND"錯誤

注：

baseUrl和css.modules已經棄用，我在上面的配置文檔裏已經改了