{"id":1060,"date":"2023-03-12T10:16:04","date_gmt":"2023-03-12T02:16:04","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1060"},"modified":"2023-04-29T11:47:26","modified_gmt":"2023-04-29T03:47:26","slug":"vue-cli-3-vue-config-js-configuration","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/12\/vue-cli-3-vue-config-js-configuration\/","title":{"rendered":"vue-cli 3.0 vue.config.js\u914d\u7f6e"},"content":{"rendered":"

baseUrl<\/h3>\n
baseUrl: process.env.NODE_ENV === 'production'? '\/static' : '\/',<\/code><\/pre>\n
<\/p>\n
\u6253\u5305\u540e\u7684\u8f93\u51fa\u76ee\u5f55<\/h3>\n
outputDir: '..\/static',<\/code><\/pre>\n
\u9759\u6001\u8d44\u6e90\u6253\u5305\u5730\u5740<\/h3>\n
assetsDir: '.\/assets',<\/code><\/pre>\n
\u4fdd\u5b58\u65f6\u662f\u4e0d\u662f\u7528eslint-loader\u6765lint\u4ee3\u7801<\/h3>\n
lintOnSave: true,<\/code><\/pre>\n
page\u914d\u7f6e<\/h3>\n
index: {\n  \/\/ \u5165\u53e3\u6587\u4ef6\n  entry: '.\/src\/main.js',\n  \/\/ \u6a21\u7248\u6587\u4ef6\n  template: 'public\/index.html',\n  \/\/ \u8f93\u51fa\u6587\u4ef6\u540d\n  filename: 'index.html'\n}<\/code><\/pre>\n
\u662f\u5426\u4f7f\u7528\u5305\u542b\u8fd0\u884c\u65f6\u7f16\u8bd1\u5668\u7684Vue\u5185\u6838\u7248\u672c<\/h3>\n
runtimeCompiler: true,<\/code><\/pre>\n
\u4f7f\u7528runtime-only<\/code>\u8fd8\u662fin-browser compiller<\/code><\/h3>\n
compiler: false,<\/code><\/pre>\n
webpack\u914d\u7f6e<\/h3>\n
chainWebpack: () => {},\nconfigureWebpack: () => {},<\/code><\/pre>\n
vue-loader\u914d\u7f6e<\/h3>\n
https:\/\/vue-loader.vuejs.org\/en\/options.html<\/a><\/p>\n
vueLoader: {},<\/code><\/pre>\n
\u662f\u5426\u9700\u8981\u751f\u4ea7\u73af\u5883\u7684sourceMap\uff0c\u9ed8\u8ba4true<\/h3>\n
productionSourceMap: true,<\/code><\/pre>\n
CSS\u76f8\u5173<\/h3>\n
css: {\n  \/\/ \u662f\u5426\u63d0\u53d6css\u751f\u6210\u5355\u72ec\u7684\u6587\u4ef6 \u9ed8\u8ba4 true\n  extract: true,\n  \/\/ \u4f7f\u7528 CSS source maps?\n  sourceMap: false,\n  \/\/ loader\u914d\u7f6e\n  loaderOptions: {},\n  \/\/ \u4f7f\u7528 css Modules\n  modules: false\n},<\/code><\/pre>\n
\u4f7f\u7528\u591a\u7ebf\u7a0b\u5426<\/h3>\n
parallel: require('os').cpus().length > 1,<\/code><\/pre>\n
\u4f7f\u7528autoDLLPlugin<\/h3>\n
dll: false,<\/code><\/pre>\n
pwa\u76f8\u5173<\/h3>\n
https:\/\/github.com\/vuejs\/vue-cli\/tree\/dev\/packages\/%40vue\/cli-plugin-pwa<\/a><\/p>\n
pwa: {},<\/code><\/pre>\n
dev server\u76f8\u5173\u914d\u7f6e<\/h3>\n
\n
\u4f7f\u7528package devsever<\/code>\u914d\u7f6e\u65e0\u6cd5\u70ed\u66f4\u65b0<\/p>\n<\/blockquote>\n
devServer: {\n  host: '192.168.54.107',\n  port: 8071,\n  https: false,\n  hotOnly: true,\n  proxy: {\n    '\/api': {\n      target: '<url>',\n      ws: true,\n      changeOrigin: true\n    },\n    '\/foo': {\n      target: '<other_url>'\n    }\n  }\n}<\/code><\/pre>\n
\u8fd9\u91cc\u8bf4\u4e00\u4e0b\u70ed\u66f4\u65b0\u6709\u53ef\u80fd\u5931\u6548\u7684\u60c5\u51b5<\/p>\n
    \n
  • \u7528npm\u5b89\u88c5<\/li>\n
  • server\u914d\u7f6e\u5199\u5728config.js<\/code>\u91cc\u9762\uff0c\u5728package\u91cc\u9762\u4f1a\u5931\u6548<\/li>\n<\/ul>\n
    \u914d\u7f6e\u793a\u4f8b<\/h3>\n
    const path = require('path');\nconst Compression = require('compression-webpack-plugin')   \/\/ gzip\u538b\u7f29\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin \/\/ \u5305\u7684\u5927\u5c0f\u5206\u6790\u5de5\u5177\n\nfunction resolve(dir) {\n  return path.join(__dirname, dir)\n}\n\nconst debug = process.env.NODE_ENV === 'production'\n\nmodule.exports = {\n  publicPath: debug ? '\/public\/static\/' : '\/',\n  chainWebpack: config => {\n    config.resolve.alias\n      .set('js', resolve('src\/assets\/js'))\n      .set('css', resolve('src\/assets\/css'))\n      .set('img', resolve('src\/assets\/img'))\n      .set('public', resolve('src\/components\/public'))\n  },\n  devServer: {\n    port: 8090,\n    open: false, \/\/ \u662f\u5426\u81ea\u52a8\u6253\u5f00\u6d4f\u89c8\u5668\u9875\u9762\n    proxy: {\n      '\/api': {\n        target: 'http:\/\/localhost:3000',\n        ws: true,\n        changeOrigin: true,  \/\/\u662f\u5426\u8de8\u57df\n        pathRewrite: {\n          '^\/api': ''\n        }\n      }\n    }\n  },\n  productionSourceMap: false, \/\/\u5982\u679c\u4f60\u4e0d\u9700\u8981\u751f\u4ea7\u73af\u5883\u7684 source map\uff0c\u53ef\u4ee5\u5c06\u5176\u8bbe\u7f6e\u4e3a false \u4ee5\u52a0\u901f\u751f\u4ea7\u73af\u5883\u6784\u5efa\n  configureWebpack: config => {    \/\/ gzip\u538b\u7f29\n    if (debug) {\n      return {\n        plugins: [\n          new Compression({\n            test: \/\\.js$|\\.html$|\\.css\/,    \/\/ \u5339\u914d\u6587\u4ef6\u540d\n            threshold: 10240,               \/\/ \u5bf9\u8d85\u8fc710k\u7684\u6570\u636e\u8fdb\u884c\u84b4\n            deleteOriginalAssets: false,    \/\/ \u662f\u5426\u5220\u9664\u6e90\u6587\u4ef6\n          })\n        ]\n      }\n    }\n    \/\/ if (!debug) {\n    \/\/   return {\n    \/\/     plugins: [\n    \/\/       \/\/ \u4f7f\u7528\u5305\u5206\u6790\u5de5\u5177\n    \/\/       new BundleAnalyzerPlugin()\n    \/\/     ]\n    \/\/   }\n    \/\/ }\n  },\n  pages: {\n    index: {\n      \/\/ entry for the page\n      entry: 'src\/main.js',\n      \/\/ the source template\n      template: 'public\/index.html',\n      \/\/ output as dist\/index.html\n      filename: 'index.html',\n      publicPath: '\/',\n      \/\/ when using title option,\n      \/\/ template title tag needs to be <title><%= htmlWebpackPlugin.options.title %><\/title>\n      title: 'PandaDeal',\n      \/\/ chunks to include on this page, by default includes\n      \/\/ extracted common chunks and vendor chunks.\n      \/\/ chunks: ['chunk-vendors', 'chunk-common', 'index']\n    },\n    \/\/ when using the entry-only string format,\n    \/\/ template is inferred to be `public\/subpage.html`\n    \/\/ and falls back to `public\/index.html` if not found.\n    \/\/ Output filename is inferred to be `subpage.html`.\n    \/\/ subpage: 'src\/subpage\/main.js'\n  },\n  lintOnSave: process.env.NODE_ENV !== 'production',\n  \/\/ chainWebpack: (config) => {\n    \/\/ config.resolve.alias\n    \/\/ .set('@$', resolve('src'))\n    \/\/ .set('assets', resolve('src\/assets'))\n    \/\/ .set('components', resolve('src\/components'))\n    \/\/ .set('layout', resolve('src\/layout'))\n    \/\/ .set('base', resolve('src\/base'))\n    \/\/ .set('static', resolve('src\/static'))\n    \/\/ .set('Com', resolve('src\/utils\/utils'))\n    \/\/ .set('wx', 'weixin-js-sdk')\n  \/\/ }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    baseUrl baseUrl: process.env.NODE_ENV === 'product […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1060","post","type-post","status-publish","format-standard","hentry","category-vue"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1060"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1060\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}