渐进式 JavaScript 框架Vue项目配置（三）

快来打我* 2022-03-28 10:46 202阅读 0赞

**项目创建成功之后用IDEA打开：在package.json同级目录下创建vue.config.js**

// vue.config.js 没使用的配置采用官方默认配置参考：https://cli.vuejs.org/zh/config/
    module.exports = {
        /**
         *指定根目录,第一个参数代表开发环境,第二个代表上线环境，
         *上线环境有子目录例如https://www.baidu.com/webapp/,
         *上线环境目录为:/webapp/ build项目时css,js会指向上线环境
         *例：href="/webapp/css/hello.css"
         */
        publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
        //用于放置生成的静态资源 (js、css、img、fonts)
        assetsDir: "assets",
        //生成的文件是否追加hash值,例:hello.f151b4d3.js
        filenameHashing: false,
        //配置地址
        devServer: {
            host:"0.0.0.0",
            port: 80,
            https: false,
            //启动打开浏览器
            open: false,
            //禁用主机检查
            disableHostCheck:false,
            //跨域请求
            /*跨域请求如果你的前端应用和后端 API 服务器没有运行在同一个主机上，
            你需要在开发环境下将 API 请求代理到 API 服务器。*/
            //proxy: 'http://555.555.555.555:80'
        },
        // 第三方插件配置
        pluginOptions: {}
    };

**package.json 可以启动和编译项目**

{
      "name": "demo",
      "version": "1.0.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve", //启动服务 
        "build": "vue-cli-service build", //编译
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "register-service-worker": "^1.5.2",
        "vue": "^2.5.21",
        "vue-router": "^3.0.1",
        "vuex": "^3.0.1"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "^3.3.0",
        "@vue/cli-plugin-eslint": "^3.3.0",
        "@vue/cli-plugin-pwa": "^3.3.0",
        "@vue/cli-service": "^3.3.0",
        "@vue/eslint-config-prettier": "^4.0.1",
        "babel-eslint": "^10.0.1",
        "eslint": "^5.8.0",
        "eslint-plugin-vue": "^5.0.0",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.2",
        "vue-template-compiler": "^2.5.21"
      }
    }

![20190110132435895.png][]

**或者通过cmd在项目根目录打开执行**

**npm run serve 启动项目**

**npm run bulid 编译项目**

[20190110132435895.png]: /images/20220328/d3d058c5aa074cdea74fa92e52b5b8fa.png