vue项目设置常量并获取
时间: 2023-05-18 22:05:26 浏览: 72
在Vue项目中,可以通过在`vue.config.js`文件中设置`process.env`变量来定义常量,然后在Vue组件中通过`process.env`来获取常量。
1. 在`vue.config.js`文件中设置常量:
```javascript
module.exports = {
// ...
configureWebpack: {
// 设置常量
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
API_URL: JSON.stringify('http://localhost:3000/api')
}
})
]
}
}
```
上面的代码中,我们设置了一个名为`API_URL`的常量,并将其值设置为`http://localhost:3000/api`。
2. 在Vue组件中获取常量:
```javascript
export default {
data() {
return {
apiUrl: process.env.API_URL
}
}
}
```
上面的代码中,我们通过`process.env.API_URL`来获取常量的值,并将其赋值给了组件的`apiUrl`属性。
注意:在Vue组件中使用`process.env`时,需要在组件中引入`process`模块:
```javascript
import process from 'process'
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)