<template> <div> <h1>{{url}}</h1> </div> </template> <script> export default { data() { return { //调用全局的环境配置 url: process.env.VUE_APP_URL }; } }; </script>
4、独立运行.vue文件
如上图中，在根目录下创建的"hello.vue"文件如何独立运行起来呢？（不依赖脚手架）
//可行方案：安装插件 sudo npm install -g @vue/cli-service-global //之后执行命令： vue serve hello.vue //这样就可以在浏览器看到hello.vue相对应的页面了
5、配置的基础路径（vue.config.js）
根目录创建文件"vue.config.js",
//vue.config.js中配置 module.exports = { baseUrl: "https://www.jb51.net/", //根路径 outputDir: "dist", //构建输出目录，执行：npm run build后项目打包在dist文件下 assetsDir: "assets", //静态资源目录（js,css,img,fonts） linitOnSave: false, //是否开启eslint保存检测，有效值:true || false || "error" }
6、配置跨域请求
在vue.config.js中进行配置：
module.exports = { baseUrl: "https://www.jb51.net/", //根路径 outputDir: "dists", //构建输出目录 assetsDir: "assets", //静态资源目录（js,css,img,fonts） lintOnSave: false, //是否开启eslint保存检测，有效值:true || false || "error" devServer: { open: true, //浏览器自动打开页面 host: '127.0.0.0', //域名 //host: "0.0.0.0", //如果是真机测试，就使用这个IP port: 8060, https: false, hotOnly: false, //热更新（webpack已实现了，这里false即可） proxy: { //配置跨域 '/api': { target: "http://localhost:2020/api", ws:true, changOrigin:true, pathRewrite:{ '^/api':'' } } } } }
7、加载json数据
根目录下创建data文件夹，里面包含文件data.json，然后在vue.config.js文件中进行配置。
const goods = require("./data/goods.json"); module.exports = { baseUrl: "https://www.jb51.net/", //根路径 outputDir: "dists", //构建输出目录 assetsDir: "assets", //静态资源目录（js,css,img,fonts） lintOnSave: false, //是否开启eslint保存检测，有效值:true || false || "error" devServer: { open: true, //浏览器自动打开页面 host: 'localhost', //域名 port: 8060, https: false, hotOnly: false, //热更新（webpack已实现了，这里false即可） //加载本地josn数据 //参见webpack官网：https://webpack.docschina.org/configuration/dev-server/#devserver-before before(app) { //http://localhost:8090/myapi/goods app.get("/myapi/goods", (req, res) => { res.json(goods); }) } } }