vue-cli3 vue.config.js配置

迷南。 2022-10-11 06:18 243阅读 0赞

vue-cli3生成的项目比vue-cli2生成的项目目录简单很多,少了`build`与`config`文件夹，所以有的东西需要自己手动配置。

条件：

将npm更新至最新  node >=8.9

1.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli

2.查看vue版本

![1312430-20190919090423275-2026129720.png][]

3.在一个新文件夹下创建项目

![1312430-20190919090857937-1057272347.png][]

在项目跟目录下新建vue.config.js对vue-cli以及webpack可以进行一些配置

![复制代码][Image 1]

const path = require('path')

module.exports = \{  
// 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致  
publicPath: ‘./’,  
// 输出文件目录  
outputDir: ‘dist’,  
// eslint-loader 是否在保存的时候检查  
lintOnSave: true,  
// 是否使用包含运行时编译器的 Vue 构建版本  
runtimeCompiler: false,  
// 生产环境是否生成 sourceMap 文件  
productionSourceMap: false,  
// 生成的 HTML 中的 <link rel=“stylesheet”> 和 <script> 标签上启用 Subresource Integrity (SRI)  
integrity: false,  
// webpack相关配置  
chainWebpack: (config) => \{  
config.resolve.alias  
.set(‘vue$’, ‘vue/dist/vue.esm.js’)  
.set(’@’, path.resolve(\_\_dirname, ‘./src’))  
\},  
configureWebpack: (config) => \{  
if (process.env.NODE\_ENV === ‘production’) \{  
// 生产环境  
config.mode = ‘production’  
\} else \{  
// 开发环境  
config.mode = ‘development’  
\}  
\},  
// css相关配置  
css: \{  
// 是否分离css（插件ExtractTextPlugin）  
extract: true,  
// 是否开启 CSS source maps  
sourceMap: false,  
// css预设器配置项  
loaderOptions: \{\},  
// 是否启用 CSS modules for all css / pre-processor files.  
modules: false  
\},  
// 是否使用 thread-loader  
parallel: require(‘os’).cpus().length > 1,  
// PWA 插件相关配置  
pwa: \{\},  
// webpack-dev-server 相关配置  
devServer: \{  
open: true,  
host: ‘localhost’,  
port: 8080,  
https: false,  
hotOnly: false,  
// http 代理配置  
proxy: \{  
‘/api’: \{  
target: ‘http://127.0.0.1:3000/api’,  
changeOrigin: true,  
pathRewrite: \{  
‘^/api’: ‘’  
\}  
\}  
\},  
before: (app) => \{\}  
\},  
// 第三方插件配置  
pluginOptions: \{

\}  
\}

![复制代码][Image 1]

转载：https://www.cnblogs.com/susutong/p/11457551.html

[1312430-20190919090423275-2026129720.png]: /images/20221005/4b6e0931b09d4f36a273f1a26bcf5031.png
[1312430-20190919090857937-1057272347.png]: /images/20221005/cc8d9290ef3443eb9472cbcb86eddc80.png
[Image 1]: