vue.config.js 中的output
时间: 2024-04-13 13:22:44 浏览: 23
在Vue.js项目中,vue.config.js是一个用于配置Vue项目的配置文件。其中,output属性用于配置项目的输出目录和文件名。
output属性是一个对象,可以包含以下几个配置项:
1. path:指定输出文件的目录路径。默认值是项目根目录下的`dist`文件夹。
2. filename:指定输出文件的名称。默认值是`js/[name].[hash:8].js`,其中`[name]`表示入口文件的名称,`[hash:8]`表示添加8位哈希值以避免缓存问题。
3. publicPath:指定输出文件的公共路径。默认值是空字符串,表示相对路径。可以设置为绝对路径或者CDN地址,用于指定静态资源的引用路径。
4. chunkFilename:指定非入口文件的名称。默认值是`js/[name].[hash:8].js`,`[name]`表示非入口文件的名称,`[hash:8]`表示添加8位哈希值以避免缓存问题。
下面是一个示例的vue.config.js文件中output的配置:
```javascript
module.exports = {
output: {
path: 'dist',
filename: 'js/[name].[hash:8].js',
publicPath: '/',
chunkFilename: 'js/[name].[hash:8].js'
}
}
```
相关问题
vue中vue.config.js
在Vue项目中,vue.config.js是用来配置项目的配置文件。在Vue 2.0版本中,build和config文件夹已经被取消,所以想要配置build生成目录等打包需求,就需要使用vue.config.js。
该文件主要用于设置webpack的配置信息,包括基础配置和各种配置详解。其中一些主要的配置包括publicPath、outputDir、assetsDir、indexPath、filenameHashing、lintOnSave、runtimeCompiler、transpileDependencies、productionSourceMap、crossorigin等。
另外,在vue.config.js中也可以配置Webpack相关信息和Css相关信息,如configureWebpack、chainWebpack、css.requireModuleExtension、css.loaderOptions、css.extract等。
关于npm安装包的--save和--save-dev区别,前者是将安装的包信息添加到package.json的dependencies中,而后者是添加到devDependencies中,devDependencies中的包只是在开发过程中使用,不会被部署到生产环境中。
vue中vue.config.js的作用
在 Vue 项目中,vue.config.js 是一个可选的配置文件,它会被 @vue/cli-service 自动加载。该文件导出一个 JavaScript 对象,用于配置 Vue 项目的构建和开发环境。通过修改 vue.config.js 文件,我们可以对项目进行一些自定义的配置,例如配置 webpack、配置代理、配置全局样式等。
具体来说,vue.config.js 可以用来实现以下功能:
1. 配置代理:在开发时使用代理可以解决跨域问题,可以在 vue.config.js 中通过 devServer.proxy 属性进行配置。
2. 配置webpack:可以通过 chainWebpack 和 configureWebpack 属性来修改 webpack 配置。
3. 配置全局样式:可以通过 css.loaderOptions 属性来配置全局样式,例如引入 less、sass 等预处理器。
4. 配置打包输出路径和文件名:可以通过 outputDir 和 filenameHashing 属性来进行配置。
5. 其他一些自定义配置:例如在构建时生成 gzip 压缩文件等。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)