vue cli版本在4.0以上的常见问题

• 1.创建项目
• 2.修改项目端口号
• 3.打包部署到nginx服务器
  • 3.1 首先在根目录下创建vue.config.js
  • 3.2 使用命令打包
  • 3.3 如果为安装部署nginx，参考此处
  • 3.4 nginx的静态资源的分离，参考此处
  • 3.5 将dist目录下的文件放在你nginx指定的目录下，在浏览器访问即可
• 4. 引入jquery
  • 4.1 首先使用指令安装jquery
  • 4.2 在main.ts进行引用
  • 4.3 在vue.config.js文件中添加以下配置
  • 4.4 具体如何使用

1.创建项目

参考此处

2.修改项目端口号

在 node_modules/@vue/cli-service/lib/commands/serve.js文件中修改，如下图所示

3.打包部署到nginx服务器

3.1 首先在根目录下创建vue.config.js

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ?
        './' :
        '/'
}

3.2 使用命令打包

npm run build

生成的文件在dist目录下，此时生成的文件是不可以直接访问的，需要部署在http服务器下，所以我们借助nginx来进行部署。

3.3 如果为安装部署nginx，参考此处

3.4 nginx的静态资源的分离，参考此处

3.5 将dist目录下的文件放在你nginx指定的目录下，在浏览器访问即可

nginx的配置：

dist文件对应的目录:

在浏览器访问路径：

4. 引入jquery

4.1 首先使用指令安装jquery

npm install jquery --save

4.2 在main.ts进行引用

import 'jquery'

4.3 在vue.config.js文件中添加以下配置

// 引入jq需要加入以下代码
const webpack = require('webpack')

  chainWebpack: config => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }])
    }

注意：若没有vue.config.js，则需要自己新建一个该文件

下面贴出vue.config.js的代码

// 引入jq需要加入以下代码
const webpack = require('webpack')
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ?
        './' : '/',
    devServer: {
        port: 3000, //前台代理端口
        proxy: {
            '/vue': {
                target: 'http: //localhost:2000', //后台接口
                ws: true, //如果要代理websockets
                secure: false, // 使用的是http协议则设置为false，https协议则设置为true
                changeOrigin: true, //将选项changeOrigin设置true为基于名称的虚拟托管站点。
                pathRewrite: {
                    '^/vue': '/vue'
                }
            }
        }
    },
    chainWebpack: config => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }])
    }


}

4.4 具体如何使用

在你要使用的页面中添加

import $ from "jquery";

本文章会持续更新，敬请期待。。。。