## :-: vue.config.js (配置文件) ``` // 更改了配置文件要重新編譯打包 // webpack用的是node環境，不能使用import，要用require const webpack = require("webpack"); const path = require("path"); module.exports = { // productionSourceMap -- 是否打包map文件(映射文件，作用是調試時會顯示錯誤在第幾行。上線后用不著) productionSourceMap: false, // outputDir -- 設置輸出目錄 默認(dist)、 outputDir: "./myDist", // publicPath -- 設置資源目錄 (開發環境'/'、生產環境'./') // process.env.NODE_ENV 可以判斷是否為生產環境 publicPath: process.env.NODE_ENV === "production" ? "./" : "/", // assetsDir -- 配置資源存放的位置(js、css、img) assetsDir: "assets", // chainWebpack -- 給路徑配置別名 chainWebpack: config => { config.resolve.alias.set("@v", path.resolve(__dirname, "src/views")); }, // ------------------------------------------------------------------------------------------ // devServer -- 設置axios代理(axios插件) devServer: { // http://localhost:8080 open: true, host: 'localhost', port: 8080, https: false, //以上的ip和端口是我們本機的;下面為需要跨域的 proxy: {//配置跨域 '/api': { target: 'https://www.baidu.com',//這里后臺的地址模擬的;應該填寫你們真實的后臺接口 ws: true, changOrigin: true,//允許跨域 pathRewrite: { '^/api': ''//請求的時候使用這個api就可以 } } } }, //configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件參數的地方，你在這里設置，會新建或者覆蓋 webpack 默認配置。 //webpack ProvidePlugin 的含義是創建一個全局的變量，使這個變量在 webpack 各個模塊內都可以使用。這里的配置含義是創建 '$'、'jQuery'、'window.jQuery' 三個變量指向 jquery 依賴，創建 'Popper' 變量指向 popper.js 依賴。 configureWebpack: { // 在這里面就像寫真正的webpack一樣，來配置 // plugins -- 插件 plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", Popper: ["popper.js", "default"] }) ] // module -- 模塊 // module: {} }, // 將less樣式注入到全局、 pluginOptions: { "style-resources-loader": { preProcessor: "less", patterns: [ // 要全局引入的樣式文件 path.resolve(__dirname, "src/xxx.less") ] } } }; ```