vue-cli3.0配置详解

￡神魔★判官ぃ 2024-04-18 12:38 61阅读 0赞

这次给大家带来vue-cli3.0配置详解，使用vue-cli3.0配置的 [注意事项][Link 1]有哪些，下面就是实战案例，一起来看一下。

**新建项目**

<table> 
 <tbody> 
 <tr> 
 <td>12345678</td> 
 <td> 
 <div> 
 <code># 安装</code> 
 <code>npm install -g @vue/cli</code> 
 <code># 新建项目</code> 
 <code>vue create my-project</code> 
 <code># 项目启动</code> 
 <code>npm run serve</code> 
 <code># 打包</code> 
 <code>npm run build</code> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

打包后的文件，对引用资源注入了预加载（preload/prefetch），启用 PWA 插件时注入 manifest/icon 链接，并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。

**功能配置**

**功能选择**

![c8ea4482f80c953576f4a64f5cab819a-0.jpg][]

3.0 版本包括默认预设配置 和 用户自定义配置，在用户自定义配置之后，会询问是否保存当前的配置功能为将来的项目配置的预设值，这样下次可直接使用不需要再次配置。

自定义功能配置包括以下功能：

1.  TypeScript
2.  Progressive Web App (PWA) Support
3.  Router
4.  Vuex
5.  CSS Pre-processors
6.  Linter / Formatter
7.  Unit Testing
8.  E2E Testing

可以根据项目大小和功能体验配置不同的功能，空格键 选中/反选，按a键 全选/全不选，按i键反选已选择项， 上下键 上下移动选择。

**功能细节配置**

![0e6f93c751036a109cd0e7dc27b482fc-1.jpg][]

在选择功能后，会询问更细节的配置，

TypeScript：

1.  是否使用class风格的组件语法：Use class-style component syntax?
2.  是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?

CSS Pre-processors：

1.  选择CSS 预处理类型：Pick a CSS pre-processor

Linter / Formatter

1.  选择Linter / Formatter规范类型：Pick a linter / formatter config
2.  选择lint方式，保存时检查/提交时检查：Pick additional lint features

Testing

1.  选择Unit测试方式
2.  选择E2E测试方式

选择 Babel, PostCSS, ESLint 等自定义配置的存放位置 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

**vue.config.js 自定义配置**

vue.config.js完整默认配置

<table> 
 <tbody> 
 <tr> 
 <td>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354</td> 
 <td> 
 <div> 
 <code>module.exports = { </code> 
 <code>&nbsp;</code><code>// 基本路径</code> 
 <code>&nbsp;</code><code>baseUrl: </code><code>'/'</code><code>,</code> 
 <code>&nbsp;</code><code>// 输出文件目录</code> 
 <code>&nbsp;</code><code>outputDir: </code><code>'dist'</code><code>,</code> 
 <code>&nbsp;</code><code>// eslint-loader 是否在保存的时候检查</code> 
 <code>&nbsp;</code><code>lintOnSave: true,</code> 
 <code>&nbsp;</code><code>// use the full build with in-browser compiler?</code> 
 <code>&nbsp;</code><code>// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only</code> 
 <code>&nbsp;</code><code>compiler: false,</code> 
 <code>&nbsp;</code><code>// webpack配置</code> 
 <code>&nbsp;</code><code>// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md</code> 
 <code>&nbsp;</code><code>chainWebpack: () =&gt; {},</code> 
 <code>&nbsp;</code><code>configureWebpack: () =&gt; {},</code> 
 <code>&nbsp;</code><code>// vue-loader 配置项</code> 
 <code>&nbsp;</code><code>// https://vue-loader.vuejs.org/en/options.html</code> 
 <code>&nbsp;</code><code>vueLoader: {},</code> 
 <code>&nbsp;</code><code>// 生产环境是否生成 sourceMap 文件</code> 
 <code>&nbsp;</code><code>productionSourceMap: true,</code> 
 <code>&nbsp;</code><code>// css相关配置</code> 
 <code>&nbsp;</code><code>css: { </code> 
 <code>&nbsp;&nbsp;</code><code>// 是否使用css分离插件 ExtractTextPlugin</code> 
 <code>&nbsp;&nbsp;</code><code>extract: true,</code> 
 <code>&nbsp;&nbsp;</code><code>// 开启 CSS source maps?</code> 
 <code>&nbsp;&nbsp;</code><code>sourceMap: false,</code> 
 <code>&nbsp;&nbsp;</code><code>// css预设器配置项</code> 
 <code>&nbsp;&nbsp;</code><code>loaderOptions: {},</code> 
 <code>&nbsp;&nbsp;</code><code>// 启用 CSS modules for all css / pre-processor files.</code> 
 <code>&nbsp;&nbsp;</code><code>modules: false</code> 
 <code>&nbsp;</code><code>},</code> 
 <code>&nbsp;</code><code>// use thread-loader for babel &amp; TS in production build</code> 
 <code>&nbsp;</code><code>// enabled by default if the machine has more than 1 cores</code> 
 <code>&nbsp;</code><code>parallel: </code><code>require</code><code>(</code><code>'os'</code><code>).cpus().length &gt; 1,</code> 
 <code>&nbsp;</code><code>// 是否启用dll</code> 
 <code>&nbsp;</code><code>// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode</code> 
 <code>&nbsp;</code><code>dll: false,</code> 
 <code>&nbsp;</code><code>// PWA 插件相关配置</code> 
 <code>&nbsp;</code><code>// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa</code> 
 <code>&nbsp;</code><code>pwa: {},</code> 
 <code>&nbsp;</code><code>// webpack-dev-server 相关配置</code> 
 <code>&nbsp;</code><code>devServer: { </code> 
 <code>&nbsp;&nbsp;</code><code>open: process.platform === </code><code>'darwin'</code><code>,</code> 
 <code>&nbsp;&nbsp;</code><code>host: </code><code>'0.0.0.0'</code><code>,</code> 
 <code>&nbsp;&nbsp;</code><code>port: 8080,</code> 
 <code>&nbsp;&nbsp;</code><code>https: false,</code> 
 <code>&nbsp;&nbsp;</code><code>hotOnly: false,</code> 
 <code>&nbsp;&nbsp;</code><code>proxy: null, </code><code>// 设置代理</code> 
 <code>&nbsp;&nbsp;</code><code>before: app =&gt; {}</code> 
 <code>&nbsp;</code><code>},</code> 
 <code>&nbsp;</code><code>// 第三方插件配置</code> 
 <code>&nbsp;</code><code>pluginOptions: { </code> 
 <code>&nbsp;&nbsp;</code><code>// ...</code> 
 <code>&nbsp;</code><code>}</code> 
 <code>}</code> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

设置代理

**启用dll**

启用dll后，我们的动态库文件每次打包生成的vendor的\[chunkhash\]值就会一样，其值可以是 true/false,也可以制定特定的代码库。

<table> 
 <tbody> 
 <tr> 
 <td>123456789</td> 
 <td> 
 <div> 
 <code>module.exports = { </code> 
 <code>&nbsp;</code><code>dll: true</code> 
 <code>}</code> 
 <code>module.exports = { </code> 
 <code>&nbsp;</code><code>dll: [</code> 
 <code>&nbsp;&nbsp;</code><code>'dep-a'</code><code>,</code> 
 <code>&nbsp;&nbsp;</code><code>'dep-b/some/nested/file.js'</code> 
 <code>&nbsp;</code><code>]</code> 
 <code>}</code> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

**静态资源路径**

相对路径

1. 静态资源路径以 @ 开头代表 <projectRoot>/src
2. 静态资源路径以 ~ 开头，可以引入node modules内的资源

public文件夹里的静态资源引用

<table> 
 <tbody> 
 <tr> 
 <td>1234567891011121314</td> 
 <td> 
 <div> 
 <code># 在 </code><code>public</code><code>/index.html中引用静态资源</code> 
 <code>&lt;%= webpackConfig.output.publicPath %&gt;</code> 
 <code>&lt;link rel=</code><code>"shortcut icon"</code> <code>href=</code><code>"&lt;%= webpackConfig.output.publicPath %&gt;favicon.ico"</code> <code>rel=</code><code>"external nofollow"</code> <code>&gt;</code> 
 <code># vue templates中，需要在data中定义baseUrl</code> 
 <code>&lt;template&gt;</code> 
 <code>&nbsp;</code><code>&lt;img :src=</code><code>"`${baseUrl}my-image.png`"</code><code>&gt;</code> 
 <code>&lt;/template&gt;</code> 
 <code>&lt;script&gt;</code> 
 <code>&nbsp;</code><code>data () { </code> 
 <code>&nbsp;&nbsp;</code><code>return</code> <code>{ </code> 
 <code>&nbsp;&nbsp;&nbsp;</code><code>baseUrl: process.env.BASE_URL</code> 
 <code>&nbsp;&nbsp;</code><code>}</code> 
 <code>&nbsp;</code><code>}</code> 
 <code>&lt;/script&gt;</code> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

**webpack配置修改**

用 webpack-chain 修改webpack相关配置，强烈建议先熟悉webpack-chain和vue-cli 源码，以便更好地理解这个选项的配置项。

对模块处理配置

<table> 
 <tbody> 
 <tr> 
 <td>123456789</td> 
 <td> 
 <div> 
 <code>// vue.config.js</code> 
 <code>module.exports = { </code> 
 <code>&nbsp;</code><code>chainWebpack: config =&gt; { </code> 
 <code>&nbsp;&nbsp;</code><code>config.module</code> 
 <code>&nbsp;&nbsp;&nbsp;</code><code>.rule(</code><code>'js'</code><code>)</code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.</code><code>include</code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.add(/some-module-to-transpile/) </code><code>// 要处理的模块</code> 
 <code>&nbsp;</code><code>}</code> 
 <code>}</code> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

修改webpack Loader配置

<table> 
 <tbody> 
 <tr> 
 <td>12345678910111213</td> 
 <td> 
 <div> 
 <code>// vue.config.js</code> 
 <code>module.exports = { </code> 
 <code>&nbsp;</code><code>chainWebpack: config =&gt; { </code> 
 <code>&nbsp;&nbsp;</code><code>config.module</code> 
 <code>&nbsp;&nbsp;&nbsp;</code><code>.rule(</code><code>'scss'</code><code>)</code> 
 <code>&nbsp;&nbsp;&nbsp;</code><code>.</code><code>use</code><code>(</code><code>'sass-loader'</code><code>)</code> 
 <code>&nbsp;&nbsp;&nbsp;</code><code>.tap(options =&gt;</code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>merge(options, { </code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>includePaths: [path.resolve(dirname, </code><code>'node_modules'</code><code>)],</code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> 
 <code>&nbsp;&nbsp;&nbsp;</code><code>)</code> 
 <code>&nbsp;</code><code>}</code> 
 <code>}</code> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

修改webpack Plugin配置

<table> 
 <tbody> 
 <tr> 
 <td>12345678910</td> 
 <td> 
 <div> 
 <code>// vue.config.js</code> 
 <code>module.exports = { </code> 
 <code>&nbsp;</code><code>chainWebpack: config =&gt; { </code> 
 <code>&nbsp;&nbsp;</code><code>config</code> 
 <code>&nbsp;&nbsp;&nbsp;</code><code>.plugin(</code><code>'html'</code><code>)</code> 
 <code>&nbsp;&nbsp;&nbsp;</code><code>.tap(args =&gt; { </code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>[</code><code>/* new args to pass to html-webpack-plugin's constructor */</code><code>]</code> 
 <code>&nbsp;&nbsp;&nbsp;</code><code>})</code> 
 <code>&nbsp;</code><code>}</code> 
 <code>}</code> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

eg: 在本次项目较小，只对uglifyjs进行了少量的修改，后期如果还有配置上优化会继续添加。

<table> 
 <tbody> 
 <tr> 
 <td>123456789101112131415</td> 
 <td> 
 <div> 
 <code>chainWebpack: config =&gt; { </code> 
 <code>&nbsp;&nbsp;</code><code>if</code> <code>(process.env.NODE_ENV === </code><code>'production'</code><code>) { </code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>config</code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.plugin(</code><code>'uglify'</code><code>)</code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.tap(([options]) =&gt;{ </code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 去除 console.log</code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>[Object.assign(options, { </code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>uglifyOptions: { compress: { </code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>drop_console : true,</code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>pure_funcs: [</code><code>'console.log'</code><code>]</code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}}</code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})]</code> 
 <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> 
 <code>&nbsp;&nbsp;</code><code>}</code> 
 <code>}</code> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

**全局变量的设置**

在项目根目录创建以下项目：

<table> 
 <tbody> 
 <tr> 
 <td>123456</td> 
 <td> 
 <div> 
 <code>.env&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; # 在所有环节中执行</code> 
 <code>.env.local&nbsp;&nbsp;&nbsp;&nbsp; # 在所有环境中执行，git会ignored</code> 
 <code>.env.[mode]&nbsp;&nbsp;&nbsp;&nbsp; # 只在特定环境执行( [mode] 可以是 </code><code>"development"</code><code>, </code><code>"production"</code> <code>or</code> <code>"test"</code> <code>)</code> 
 <code>.env.[mode].local&nbsp; # 在特定环境执行, git会ignored</code> 
 <code>.env.development&nbsp; # 只在生产环境执行</code> 
 <code>.env.production&nbsp;&nbsp; # 只在开发环境执行</code> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

在文件里配置键值对：

<table> 
 <tbody> 
 <tr> 
 <td>12</td> 
 <td> 
 <div> 
 <code># 键名须以VUE_APP开头</code> 
 <code>VUE_APP_SECRET=secret</code> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

在项目中访问：

<table> 
 <tbody> 
 <tr> 
 <td>1</td> 
 <td> 
 <div> 
 <code>console.log(process.env.VUE_APP_SECRET)</code> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

这样项目中的 process.env.VUE\_APP\_SECRET 就会被 secret 所替代。

vue-cli 3 就项目性能而言已经相当友好了，私有制定性也特别强，各种配置也特别贴心，可以根据项目大小和特性制定私有预设，对前期项目搭建而言效率极大提升了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！